Question

我在最后一天一直在努力解决这个简单而基本的问题，似乎无法找到解决方案。

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

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

Muh code：

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>

Answer 2

＆＃13;

.social-line-container{
border:2px solid black;  
}

.social-line-buttons-group{
    display:flex;
    align-items: center;
    justify-content: center;
  height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
  height:50px;
}

＆＃13;

<div class="social-line-container">
      <div class="social-line-buttons-group">
          <a href="#0"><img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB"></a>
          <a href="#0"><img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW"></a>
          <a href="#0"><img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO"></a>
          <a href="#0"><img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT"></a>
       </div>
  </div>

＆＃13;

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

2 个答案: