How to align the icons in the same line

Question

I am trying to align the icons in the same line but they are not properly aligned.

Here is my code and screenshot is attached:

<div align="center">
    <a href="http://www.facebook.com" target="blank"><img src="images/facebook.png"></a></li>
    <a href="http://www.twitter.com" target="blank"><img src="images/twitter.png"></a></li>
    <a href="" target="blank"><img src="images/googleplus.png"></a></li>            
</div>

Answer 1

This is for everyone stumbling over this question, that wants to center svg icons inline with some text.

To be able to center these icons we must first understand the CSS unit em. 1em represents the height of the font in the current element. So in a h1 element 1em would be larger than in a p element.

So to resize the icon the height has to be 1em, to work in every element.

If the text is only one line like a header, aligning the resized SVG's with the other line can be done with flex-boxes using align-items: center;.

.icon-text {
  display: flex;
  align-items: center;
  
  /* just for cosmetics */
  gap: 0.5em;
}

.icon {
  height: 1em;
}

<h1 class="icon-text">
  <span>Hello World</span>

  <a class="icon" href="#">
    <svg height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <rect width="24" height="24" fill="red" />>
    </svg>
  </a>

  <svg class="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <rect width="24" height="24" fill="red" />>
  </svg>
</h1>

However, if the icon should be inline of a multi line text, the aligning gets slightly more complicated, because you can't use flexboxes anymore. If you just put an SVG with the height of 1em in a text, it gets aligned at its baseline. However, it generally looks better aligned at its center.

If the icon is not shifted down at al the upper edge of the icon will align with the upper edge of the text.
Shifting the icon 0.25em down, will align its lower edge with the lower edge of the text.

So if the icon is shifted 0.125em down, the center of the text is aligned with the center of the icon. Explaining this would require a deep-dive in Typography.

.icon {
    height: 1em;

    /* shift the icon down */
    position: relative;
    top: 0.125em;
}

<h1>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    <svg class="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <rect width="24" height="24" fill="red" />>
    </svg>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
</h1>

Answer 2

You don't open ul and li. You only close li tag. If you wanna use li, you can see this solution:

HTML:

    <ul class="icons">
        <li><a href="http://www.facebook.com" target="blank"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-facebook-box-blue-icon.png" alt="Facebook" title="Facebook"></a></li>
        <li><a href="http://www.twitter.com" target="blank"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-twitter-box-blue-icon.png" alt="Twitter" title="Twitter"></a></li>
        <li><a href="" target="blank"><img src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/48/Google-plus-icon.png" alt="GooglePlus" title="GooglePlus"></a></li>  
    </ul>

CSS:

ul.icons{
    list-style: none;
    text-align: center;
}
ul.icons li {
    display: inline-block;
}

Working example here.

Answer 3

Centering item using flexbox.

<div class="center">
    <a href="http://www.facebook.com" target="blank"><img src="images/facebook.png"></a>
    <a href="http://www.twitter.com" target="blank"><img src="images/twitter.png"></a>
    <a href="" target="blank"><img src="images/googleplus.png"></a>         
</div>

CSS

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.center a {
    margin: 0 5px;
}

As per chharvey comment. This is the way you can use ul li technique.

<ul>
  <li>
    <a href="http://www.facebook.com" target="blank"><img src="images/facebook.png"></a>
  </li>
  <li>
    <a href="http://www.twitter.com" target="blank"><img src="images/twitter.png"></a>
  </li>
  <li>
    <a href="" target="blank"><img src="images/googleplus.png"></a>   
  </li>
</ul>

CSS

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  margin: 0 10px;
}

ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

ul li a img {
  width: 100%;
}

Note: the flex in anchor tag is for the image to be aligned center. You might