CSS div内图像的垂直对齐

vertical alignment of image inside a div

提问by Deepa

I want to set vertical alignment of image inside a div. I use img { vertical-align:middle} but it is not working.

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

回答by Pramendra Gupta

Using the line-heightproperty will solve the problem:

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

回答by RussellUresti

This is a solution that doesn't require JavaScript (as my previous solution did).

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

You can achieve what you want by assigning display: table-cellto the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit

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

I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cellvalue is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).

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

The CSS:

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;
  }

You won't need the div#container imgstyles if you don't also want to horizontally align the image.

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

回答by silviomoreto

See this awser: How to vertical align image inside div

请参阅此 awser：如何在 div 内垂直对齐图像

If you want to align horizontally also, add the rightand left, like this:

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

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

回答by RussellUresti

If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.

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

In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.

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

Here's a working example: http://jsbin.com/evuqo5/edit

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

Basic CSS is this:

基本的 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 */
}

回答by Marc Audet

The following post has some useful references:

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

Text Alignment w/ IE9 in Standards-Mode

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

Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.

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

If you have to, use a one-row-one-cell table and take advantage of the vertical-alignproperty. This is brute-force, not overly semantic, but it works.

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

回答by xzyfer

If you set the div displayattribute to table-cellthen vertical-align: middle;will work.

如果您将 divdisplay属性设置为table-cell那么vertical-align: middle;将起作用。

The vertical-alignrule only affects table cells or elements with display: table-cell.

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

See this article from SitePointfor a detailed explanation.

有关详细说明，请参阅来自 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>