html - 在 DIV 中垂直对齐 img

标签 html css cross-browser vertical-alignment

<分区>

我想垂直对齐 DIV 中的 IMG,但我看不出我做错了什么。 它适用于 FF 和 IE7,但其他浏览器只是将它对齐到顶部。 代码可以在这里找到:

http://disgeae.nl/testomgeving/

最佳答案

<style type="text/css">
  .wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
  }

  .wraptocenter * {
    vertical-align: middle;
  }
</style>
<!--[if lt IE 8]>
<style>.wraptocenter span {    display: inline-block;    height: 100%;}/style>
<![endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

检查一下 link出来,它确实帮助了我:

关于html - 在 DIV 中垂直对齐 img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16686438/

相关文章:

html - 我们可以转义用作相对单位的 % 符号吗

html - 文本和下划线之间的差距

css - 如何减少这些 View 组件之间的空间 React Native

javascript - Materialise 可折叠 Accordion 不工作 IOS 13

javascript - HTML 多头

html - twitter-bootstrap 中心旋转木马图像不考虑屏幕尺寸

html - 对齐一组标签和值

Javascript:捕获并防止 HTML 表中的重复行条目

html - 为什么 IE hacks 对我不起作用?

html - Iframe 中的 PHP 页面中的背景透明度错误