html - 垂直对齐图片与 div 内的链接

Question

在过去的一天里，我一直在努力解决这个简单而基本的问题，但似乎无处可寻。

我的网站上有一个容器 div，其中有四个社交网络按钮，我想要实现的是将它们垂直对齐到中间 容器的顶部和底部有相同数量的可用空间。

请注意，我已将 normalize.css 和 reset.css 链接到我的 html。

Muh 代码:

HTML

<div class="social-line-container">
      <div class="social-line-buttons-group">
          <a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
          <a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
          <a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
          <a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
       </div>
  </div>

CSS

.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}

.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}

任何帮助将不胜感激。

Answer 1

所有你需要添加的是clear

.social-line-container {
  width: 66%;
  height: inherit;
  margin: 0 auto;
}
.social-line-buttons-group a {
  display: inline-block;
  /*vertical-align: middle;*/
  height: 100%;
  float: right;
  clear: both; /* add */
  padding: 2px;
  margin: 0 3px;
}

<div class="social-line-container">
  <div class="social-line-buttons-group">
    <a href="#0">
      <img src="socialicons/facebook.png" alt="FB"><a/>
      <a href="#0">
        <img src="socialicons/twitter.png" alt="TW"><a/>
        <a href="#0">
          <img src="socialicons/google.png" alt="GO"><a/>
          <a href="#0">
            <img src="socialicons/youtube.png" alt="YT"><a/>
  </div>
</div>