我想垂直对齐这两张图片。现在第一张图片 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/
感谢您的帮助。
最佳答案
不要 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>
关于html - 使用 CSS 和 HTML 垂直对齐图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28171014/