我知道有多种方法可以垂直对齐 div 中的图像,正如此处已经指出的那样:How to vertically align an image inside div
仍然,根据我自己的测试,我很好奇为什么下面的内容在粘贴到 .htm 文件并在 Chrome 39 或 IE 11 中打开时似乎没有中间对齐,但在 JSFiddle 中工作得很好:http://jsfiddle.net/4RPFa/6908/
有什么我遗漏的非常明显的东西吗?
谢谢。
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 300px; line-height: 300px;background-color:green;">
<img width="70" height="70" style="vertical-align:middle; background-color:blue;" alt="" src="image.png">
</div>
</body>
</html>
最佳答案
在这种特定情况下,它在 fiddle 之外呈现不同的原因是因为它们使用的是 <!DOCTYPE html>
。 ,而您使用的是 <html>
(怪癖模式)。请随意尝试。
你可以在这里阅读更多关于怪癖模式的奇怪之处:http://www.cs.tut.fi/~jkorpela/quirks-mode.html
关于html - 在 div 中垂直对齐图像的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27335079/