图片在div内的垂直对齐

Question

图片在div内的垂直对齐

cssimagealignmentvertical-alignment

13

我想设置一个div中图像的垂直对齐方式。我使用了img { vertical-align:middle }，但是它没有起作用。

- Deepa

可能相关：http://stackoverflow.com/questions/3535689/text-in-vertical-middle-of-div。 - Blender

1

作为新手，你可能想要给一些回答点赞，因为它们指引了你正确的方向，而我们都抽出了工作/生活中的时间来互相帮助。 - Marc Audet

6个回答

7

这是一个不需要JavaScript的解决方案（与我的之前的解决方案不同）。

您可以通过将display: table-cell分配给包含

来实现您想要的效果。以下是一个示例：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 样式。

- RussellUresti

如果您需要使用百分比来设置高度，那么这种方法将无法奏效，就像我的情况一样。 - claudius iacob

2

如果你想要做我认为的那样，垂直对齐是无法实现的；你需要使用定位。通常情况下，相对定位容器，绝对定位图像，将顶部和左侧设置为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 */
}

- RussellUresti

我不想计算每个图像的高度和宽度。 - Deepa

我将发布另一种解决方案，它将不需要JavaScript即可运行，但可能不受每个浏览器的支持。 - RussellUresti

我不知道这张图片的尺寸。它的宽度设置为百分比，高度未设置，因此会等比缩放。 - claudius iacob

2

请参考此答案：如何将图像在 div 内垂直对齐

如果您还想水平对齐，可以添加right和left，像这样：

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

- silviomoreto

0

如果您将

的display属性设置为table-cell，那么vertical-align: middle;就会起作用。

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

请参阅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>

- xzyfer

1

你说得对，我漏掉了一些东西。我已经更新了代码使其正常工作。如果你真的花时间阅读我发布的链接，你本来就会注意到这个问题并解决它。请努力学习，而不是简单地寻求答案。 - xzyfer

0

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

在标准模式下使用IE9进行文本对齐

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

如果必须这样做，请使用一个行列均为一的表格，并利用vertical-align属性。这是强制性的，不太语义化，但它有效。

- Marc Audet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pramendra Gupta · Accepted Answer

使用 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>