0

我已经看过并阅读了很多关于这个主题的帖子，但没有一个在我的环境中起作用，或者我做错了什么。我有一个 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。有什么建议吗？谢谢！

4

1 回答 1

1

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

请参阅此小提琴示例！

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、火狐、K-MELEON、谷歌浏览器

笔记：

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

阅读有关此的更多信息：

CSS 显示属性 | CSS 垂直对齐属性 | CSS技巧：什么是垂直对齐？

已编辑

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

看这里的小提琴！

相关的 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 标签的 vertical-align 和 line-height 来创建相同的垂直点并垂直对齐文本。

你可以阅读： CSS line-height 属性

已编辑

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

看到这个工作小提琴！

查询

$(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"});
});

注意： 从and中删除了，因为不再需要它！line-heightdiv.headerleftdiv.headerright

于 2012-05-12T19:52:12.913 回答