html - 使用 CSS 和 HTML 垂直对齐图像

Question

我想垂直对齐这两张图片。现在第一张图片 float 在顶部，而不是中间。

HTML:

<div class="footer-logos">
    <a href=""><img src="http://preloaders.net/preloaders/182/Google%20plus%20logo.gif"></a>
    <a href=""><img src="https://developers.google.com/glass/images/icons/glass_logo_128.png"></a>
</a>

CSS:

.footer-logos {
    background:blue;
    width:100%;
    float:left
}

.footer-logos a {
margin: 50px 20px 50px 0;
float: left;
}

JSFiddle: http://jsfiddle.net/u588uddm/

感谢您的帮助。

Answer 1

不要 float 链接，使用display:inline-block 和vertical-align:middle

.footer-logos {
  background: blue;
  width: 100%;
  float: left
}
.footer-logos a {
  margin: 50px 20px 50px 0;
  display: inline-block;
  vertical-align: middle;
}

<div class="footer-logos">
  <a href="">
    <img src="http://preloaders.net/preloaders/182/Google%20plus%20logo.gif" />
  </a>
  <a href="">
    <img src="https://developers.google.com/glass/images/icons/glass_logo_128.png" />
  </a>
</div>