facebook照片/图像垂直对齐？ [英] facebook photo/ image vertical align?
问题描述
facebook如何垂直对齐照片？我检查了他们的img标签及其父母。父级不使用填充，img不使用边距。有垂直对齐，但我不认为它适用于这种情况（参见图像不垂直对齐：中间）。我通常使用边距（有时使用javascript）垂直对齐，所以我对facebook没有填充或边距的方式感兴趣。有谁知道他们是怎么做到的？
How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
推荐答案
在facebook的网站上做了一些研究后我找到了答案，这里是代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
还有一件事，父母的身高和行高应该相等，它应该更大比它包含的图像的高度
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
这篇关于facebook照片/图像垂直对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
