使用最大高度和最大宽度垂直居中图像答案

【问题标题】：Vertically centering an image with max-height and max-width使用最大高度和最大宽度垂直居中图像
【发布时间】：2011-10-01 21:33:35
【问题描述】：

我有以下html代码：

<div style="border: 3px coral solid;width:400px;height:400px;background:#D4D0C8;">
    <img style="max-width:400px;max-height:400px;" src="myImage.jpg">
</div>

使用这些样式，宽度 > 400 像素的图像会调整大小，但仍保留在 div 的顶部。有没有办法让它们垂直居中？

【问题讨论】：

@Samidjo：你在正确的轨道上。下面的 NGLN 解决方案具有使用最大宽度垂直居中图像所需的样式。尽管如此，我仍然遇到问题，如果找到修复程序，我会发布答案。

标签： html css

【解决方案1】：

CSS：

div {
    border: 3px solid coral;
    width: 400px;
    height: 400px;
    background: #d4d0c8;
    line-height: 400px;
    text-align: center;
}
img {
    max-width:400px;
    max-height:400px;
    vertical-align: middle;
}

见demo fiddle。

【讨论】：

感谢 NGLN。这似乎可以解决问题，但我遇到了一些奇怪的行为。您的示例和我页面中的完整代码正确地以 jsFiddle 为中心。但是，在整个页面上，图像仅在 Firefox 上垂直居中。可能存在冲突，但我在 Firebug 上看不到任何明显的内容。
@James 你能分享你页面的链接吗？
当然。我将在此回复下临时发布一个链接。代码可能更漂亮，但我有点时间紧迫，之后会清理。我没有看到任何明显的东西，比如 div 或 img 的定义。
@James 图片在哪里？ “我什么都没看到……”是什么意思？在您的问题中，您清楚地说明了一个 img 标签。那是从哪里来的呢？：困惑：
你能看到下面发布的链接吗？图片在中间，左右也有三张图片。

【解决方案2】：

好的，我似乎找到了问题所在。图像确实在提供的链接上正确居中，因为它位于 iframe 内。在正常的页面流中，图像将显示在其封闭容器的顶部。

由于 table et display: table-cell 在 IE 中被破坏，修复需要一个最小的封闭表：

<html>
<head>
<style type="text/css">
#content { border:solid 1px;}   
img{ max-width:400px;max-height:400px;margin:auto;}
#page-table {
    height: 400px;
    width: 400px;
    border-collapse: collapse;
    text-align: center;
    border:solid 1px;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}

div#content2{
    border:solid 1px;
    width: 400px;
    height: 400px;
    /*line-height: 400px;*/
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
img#image2 {
    max-width:400px;
    max-height:400px;
    vertical-align: middle;
}
div#enclosingdiv2 {
    border:solid 1px;
}

</style>
</head>
<body>

With table:
<table id="page-table"><tr><td id="page-td">
<div id="content">
<img src="http://lorempixum.com/250/250/abstract">
</div>
</td></tr></table>

Without:
<div id="content2">
<div id="enclosingdiv2">
<img id="image2" src="http://lorempixum.com/250/250/abstract">
<div>
</div>

</body>
</html>

【讨论】：