html - 在 div 中垂直对齐图像的问题

标签 html css image vertical-alignment

我知道有多种方法可以垂直对齐 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/

相关文章:

jquery - 卡在主题菜单修复

Android PDF页面转图片api

javascript - img onload 在 IE7 中效果不佳

jquery - 如何解决 Wordpress 的 Bootstrap 轮播缩略图中的元素事件和数据源部分?

css - 为什么这适用于悬停而不是焦点?

javascript - AngularJS 在处理 HTML Void 元素的自定义指令时是否有错误

javascript - CSS 视觉渲染在 JS 脚本完成之前不显示

Android:在另一张图片的中心绘制图片

javascript - 为什么 jquery .text() 总是返回一个空字符串?

html - 带有 svg 背景图像的 Div