Html Question posted in
Some basic documentation can be found here.

Html – How can I make a div with two social media icons sit on the same level as the rest of the content?

I am trying to put a byline, two social media buttons, and a share button together. The social media icons are the same size block as the other two elements, but they sit above the line.

image of bug

When I set line-height to 0 it doesn’t work. It just makes the block shorter, but it still sits above the other blocks. I also tried to set padding and margin to 0 and that didn’t work.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="html-spec.css">
        <title></title>
    </head>
    <body>

        <nav>
        <ul class="menu">
            <li>home</li>
            <li>news</li>
            <li>updates</li>
            <li>more</li>
        </ul>
        </nav>

        <div class="heading-1">
        <h1>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do</h1>
        </div>

        <!-- start of issue -->
        <div class="container">
        <h2 class="byline">By Author</h2>
        <div class="social-media">
        <a href="https://www.facebook.com" target="_blank"><img src="square-facebook-brands-solid.svg" class="facebook"></a>
        <a href="https://www.x.com" target="_blank"><img src="square-x-twitter-brands-solid.svg" class="twitter"></a>
        </div>
        <p class="share">share</p>
        </div>
    </body>
</html>

.facebook {
    height: 25px;
}

.twitter {
    height: 25px;
}

.byline, .social-media, .share {
    display: inline-block;
    background-color: green;
}

.share {
    border: solid black 2px;
    padding: 2px;
}
Tags:

2

Answers


  1. 0

    Flexbox can be a solution to this. With align-items: center you make sure that it is aligned on the center line of the container.

    .facebook {
    height: 25px;
}

.twitter {
    height: 25px;
}

.byline, .social-media, .share {
    display: inline-block;
    background-color: green;
}

.share {
    border: solid black 2px;
    padding: 2px;
}

// EDIT

.container {
  display: flex;
  align-items: center;
  gap: .5rem;
}
    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="html-spec.css">
    <title></title>
  </head>

  <body>

    <nav>
      <ul class="menu">
        <li>home</li>
        <li>news</li>
        <li>updates</li>
        <li>more</li>
      </ul>
    </nav>

    <div class="heading-1">
      <h1>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do</h1>
    </div>

    <!-- start of issue -->
    <div class="container">
      <h2 class="byline">By Author</h2>
      <div class="social-media">
        <a href="https://www.facebook.com" target="_blank"><img src="square-facebook-brands-solid.svg" class="facebook"></a>
        <a href="https://www.x.com" target="_blank"><img src="square-x-twitter-brands-solid.svg" class="twitter"></a>
      </div>
      <p class="share">share</p>
    </div>
  </body>

</html>
    Login or Signup to reply.
  2. 0

    You can use the vertical-align property to set the vertical alignment of an element.

    .facebook {
    height: 25px;
}

.twitter {
    height: 25px;
}

.byline, .social-media, .share {
    display: inline-block;
    background-color: green;
    vertical-align: middle; /* Align elements vertically */
}

.share {
    border: solid black 2px;
    padding: 2px;
}
    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="html-spec.css">
        <title></title>
    </head>
    <body>

        <nav>
        <ul class="menu">
            <li>home</li>
            <li>news</li>
            <li>updates</li>
            <li>more</li>
        </ul>
        </nav>

        <div class="heading-1">
        <h1>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do</h1>
        </div>

        <!-- start of issue -->
        <div class="container">
        <h2 class="byline">By Author</h2>
        <div class="social-media">
        <a href="https://www.facebook.com" target="_blank"><img src="square-facebook-brands-solid.svg" class="facebook"></a>
        <a href="https://www.x.com" target="_blank"><img src="square-x-twitter-brands-solid.svg" class="twitter"></a>
        </div>
        <p class="share">share</p>
        </div>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search