div内图像的垂直对齐答案

【问题标题】：vertical alignment of image inside a divdiv内图像的垂直对齐
【发布时间】：2011-07-22 16:36:33
【问题描述】：

我想在 div 中设置图像的垂直对齐方式。我使用 img { vertical-align:middle} 但它不起作用。

【问题讨论】：

可能相关：stackoverflow.com/questions/3535689/….
作为新手，您可能想要对其中一些答案进行投票，因为它们为您指明了正确的方向，而且我们都在工作/生活中抽出时间互相帮助。跨度>

标签： css image alignment vertical-alignment

【解决方案1】：

使用line-height 属性可以解决问题：

<style> 
.someclass {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  border: dotted;
}
.someclass img {
  margin: auto;
  vertical-align: middle;
}
</style>
<div class="someclass"> 
  <img src="someimg.jpg" border="0" alt=""> 
</div>

【讨论】：

因为你可能不得不引入缩放
与显示表格单元格相比，这对 IE7 来说就像一个魅力。谢谢！
table-cell made height:100% 在我的情况下停止工作。

【解决方案2】：

看到这个awser：How to vertical align image inside div

如果您还想水平对齐，请添加right 和left，如下所示：

div {
  position:relative;
}
img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

【讨论】：

【解决方案3】：

这是一个不需要 JavaScript 的解决方案（就像我之前的解决方案一样）。

您可以通过将 display: table-cell 分配给包含的 div 来实现您想要的。这是一个例子：http://jsbin.com/evuqo5/2/edit

我觉得我必须警告您，您将需要在您打算支持的每个浏览器中对此进行测试。对 table-cell 值的支持是相当新的，尤其是在 Firefox 中。我知道它适用于 Firefox 4，但我不知道任何 3.x 迭代。您还需要在 IE 中进行测试（我只在 Chrome 10 和 Firefox 4 中进行了测试）。

CSS：

  div#container {
    width: 700px;
    height: 400px;
    position: relative;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;  
  }
  div#container img {
    margin: 0 auto;
    display: block;
  }

如果您不想水平对齐图像，则不需要div#container img 样式。

【讨论】：

如果您需要使用百分比作为高度，这将不起作用，就像我的情况一样。

【解决方案4】：

如果您将 div display 属性设置为 table-cell，则 vertical-align: middle; 将起作用。

vertical-align 规则仅影响带有display: table-cell 的表格单元格或元素。

详情请见this article from SitePoint。

<style>
/* change body to .someClasses's parent */

body {
  width: 100%;
  height:  100%;
  display: table;
}
body > .someclass {
    width: 300px;
    height: 300px;
    text-align: center;
    border:dotted;
    margin: 0 auto
    display: table-cell;
    vertical-align: middle;
}
</style>

<body>
    <div class="someclass"> 
        <img src="someimg.jpg" border="0" alt=""> 
    </div>
</body>

【讨论】：

你说得对，我错过了一些东西。我已经更新了代码来工作。如果您真的费心花时间阅读我发布的链接，您就会自己注意到这一点并已经解决了这个问题。请努力实际学习一些东西，而不是简单地寻求答案。

【解决方案5】：

以下帖子有一些有用的参考：

Text Alignment w/ IE9 in Standards-Mode

此外，根据您测试的 IE 版本，您最终可能需要一些特定于浏览器的 hack 或一些 jQuery/JavaScript 代码。

如果必须，请使用单行一单元格的表格并利用 vertical-align 属性。这是蛮力的，不是过于语义化，但它确实有效。

【讨论】：

【解决方案6】：

如果你按照我的想法去做，那么垂直对齐是行不通的；你需要使用定位。

一般来说，将容器相对定位，然后将图像绝对定位，将顶部和左侧设置为 50%，然后通过设置负边距等于宽度/高度的一半将图像移回中心。

这是一个工作示例：http://jsbin.com/evuqo5/edit

基本的 CSS 是这样的：

#container { position: relative; }
#container img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: /* -1/2 the height of the image */
  margin-left: /* -1/2 the width of the image */
}

【讨论】：

我不想计算每张图片的高度和宽度
我将发布另一个解决方案，它可以在没有 JavaScript 的情况下工作，但可能并非所有浏览器都支持。
我不知道图片的尺寸。它的宽度设置为百分比，高度未设置，以便按比例缩放。