使用CSS和HTML垂直对齐图像

Question

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

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

请勿浮动链接，使用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>

Answer 2

试试这个http://jsfiddle.net/u588uddm/4/

.footer-logos a:first-child {
    float: left;
    margin: 97px 20px 0 0;
}