Question

我想在div中设置图像的垂直对齐方式。我用img {vertical-align：middle} 但它没有用。

Answer 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>

Answer 2

这是一个不需要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样式。

Answer 3

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

通常，将容器放置在相对位置，然后将图像置于绝对位置，顶部和左侧设置为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 */
}

Answer 4

见这个：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;
}

Answer 5

如果您将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>

Answer 6

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

Text Alignment w/ IE9 in Standards-Mode

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

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

div内部图像的垂直对齐

6 个答案: