如何在同一行中对齐图标

Question

我正在尝试将图标对齐在同一行，但它们没有正确对齐。

以下是我的代码和截图：

<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

使用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;
}

根据chharvey评论。这是你使用ul li技术的方法。

<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%;
}

注意：锚标记中的flex是图像对齐的中心。你可能

Answer 2

你不打开ul和li。你只关闭li标签。 如果你想使用li，你可以看到这个解决方案：

<强> HTML：

test.txt

<强> CSS：

    <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>

工作示例here。