【问题标题】：Vertical centering of multiple variable sized images in a div with CSS in IE 9在 IE 9 中使用 CSS 在 div 中垂直居中多个可变大小的图像
【发布时间】：2012-05-20 22:56:33
【问题描述】：

我已经看过并阅读了很多关于这个主题的帖子，但没有一个在我的环境中有效，或者我做错了什么。我有一个 div，其中包含各种未知大小的图像和文本。我希望所有图像和 div 中的所有图像都垂直居中。我使用的是 Internet Explorer 9。

这是我的代码，为了简单起见，我删除了我尝试过的所有各种技术：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.header
{
height:75px;
background-color:#FFF;
padding-left:10px;
padding-right: 10px;
}
div.headerleft
{
border: none; 
float: left; 
margin: 0; 
padding: 0; 
}

div.headerright
{
border: none; 
float: right; 
margin: 0; 
padding: 0; 
}
h1
{
font: 44px Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0; 
padding-top: 0;
}   

img.centerImage
{
vertical-align:middle;
}    
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
    <div class="headerleft">
        <img class="centerImage" border="0" alt="Test 1" src="../Images/test1.jpg" />
        <img class="centerImage" border="0" alt="Test 2" src="../Images/test2.jpg" />
    </div>
    <div class="headerright">
        <h1>
            Centered Text Vertically
        </h1>
    </div>
</div>
</form>
</body>
</html>

我想强调一下，文字和图片的大小未知。我发现这肯定会使解决方案复杂化。另外，根据 ActiveX 要求，我使用的是 Internet Explorer 版本 9。有什么建议吗？谢谢！

【问题讨论】：

你说未知尺寸，但已将标题设置为高度：75px;，它是什么？
@reisio 75px 是包含 div 的高度，所有图像的高度都小于 75px ...我知道。

标签： css internet-explorer html vertical-alignment

【解决方案1】：

要使用垂直对齐，最好设置一个显示设置为表格单元格的包装器：

看到这个Fiddle Example!

CSS：

/* the vertical alignment class */
.centerImage {
    display: table-cell;
    vertical-align:middle;
}

HTML

...
<div class="headerleft">
  <span class="centerImage">
    <img border="0" alt="Test 1" src="path_to_image.jpg" />
  </span>
  <span class="centerImage">
    <img border="0" alt="Test 2" src="path_to_image.jpg" />
  </span>
</div>
<div class="headerright">
  <h1 class="centerImage">Centered Text Vertically</h1>
</div>
...

已测试：

IE9、IE8、OPERA、SAFARI、Firefox、K-MELEON、谷歌浏览器

注意事项：

您应该为正确的 HTML 验证指定图像的宽度和高度，以便浏览器更好地理解。

已编辑

关于reisio给出的评论，要让左边的图片和右边的文字有相同的垂直点，我们可以用一个更简单的解决方案：

见Fiddle Here!

相关的 CSS

/* the trick you want */
.centerImage {
    vertical-align:middle;
}
div.headerleft {
    border: none;
    float: left;
    margin: 0;
    padding: 0;
    line-height: 75px;
}

div.headerright {
    border: none;
    float: right;
    margin: 0;
    padding: 0;
    line-height: 75px;
}
h1 {
    font-size: 44px;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

相关 HTML

<div class="headerleft">
  <img class="centerImage" border="0" alt="Test 1" src="path_to_img.jpg" />
  <img class="centerImage" border="0" alt="Test 2" src="path_to_img.jpg" />
</div>
<div class="headerright">
  <h1 class="centerImage">Centered Text Vertically</h1>
</div>

对于这个解决方案，我们使用设置为 img 标签的垂直对齐和行高来创建相同的垂直点并垂直对齐文本。

您可以阅读：CSS line-height Property

已编辑

如果您无法为图像设置height，解决您的问题的唯一方法是使用一点 JavaScript 来动态找到最高的图像并将height 应用到H1 标签上的line-height。

看到这个working Fiddle!

JQUERY

$(document).ready(function() {

    // initialize the variable to 0
    var height = 0;

    // run by each image to find the tallest
    $('.headerleft img').each(function() {
        height = ($(this).outerHeight(true)>height) ? ($(this).outerHeight(true)) : height;
    });

    // vertical center the text
    $('.headerright h1').css({"line-height": height + "px"});
});

注意： 从div.headerleft 和div.headerright 中删除了line-height，因为它不再需要！

【讨论】：

我相信他希望左边的图片和右边的文字都对齐到同一个垂直点。
reisio：我在几分钟前添加了一个考虑到您的评论的解决方案！似乎解决了这个问题！
确实如此，假设他确实想要一个 75px 的固定垂直尺寸，尽管他重申他没有（可能是这种情况）。我早些时候看到并选择不再发表评论，但如果你想要我的同意，你有它先生。 :)
感谢所有的努力。除非我弄错了，否则这不适用于未知的图像尺寸。如果我删除宽度和高度，它会失败。
在我的场景中添加更多内容，如果我的 headerleft div 中有 2 个图像，那么它可以在不指定图像大小的情况下工作。如果我只有 1 张图片，这是最合理的。