Fatal编程技术网
  • css/
  • 使用IE 9中的CSS在div中垂直居中多个可变大小的图像

使用IE 9中的CSS在div中垂直居中多个可变大小的图像

css internet-explorer html

使用IE 9中的CSS在div中垂直居中多个可变大小的图像,css,internet-explorer,html,vertical-alignment,Css,Internet Explorer,Html,Vertical Alignment,我已经看过很多关于这个主题的帖子，但是没有一篇在我的环境中起作用，或者我做错了什么。我有一个div，其中包含各种未知大小的图像和文本。我希望div中的所有图像和都垂直居中。我正在使用Internet Explorer 9 这是我的代码，为了简单起见，我删除了我尝试过的所有技术： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

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


分区标题
{
高度：75px；
背景色：#FFF；
左侧填充：10px；
右边填充：10px；
}
头左分区
{
边界：无；
浮动：左；
保证金：0；
填充：0；
}
头灯
{
边界：无；
浮动：对；
保证金：0；
填充：0；
}
h1
{
字体：44px塔荷马，日内瓦，威尔达纳，无衬线；
页边距底部：0；
边际上限：0；
填充底部：0；
填充顶部：0；
}   
图像中心
{
垂直对齐：中间对齐；
}    
垂直居中文本
我想强调的是，文本和图像的大小未知。我发现这肯定会使解决方案复杂化。另外，基于ActiveX的要求，我正在使用Internet Explorer版本9。有什么建议吗？谢谢

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

看到这个了吗

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>
...

<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>
相关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>
...

<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>
注意：
从
div.headerleft
和
div.headerlight
中删除了
行高，因为不再需要它
 您说尺寸未知，但已将标题设置为高度：75px；，是哪个？@reisio 75px是包含div的高度，所有图像的高度都小于75px。。。我知道。我相信他希望左边的图像和右边的文本都对齐到同一个垂直点。赖西奥：几分钟前我添加了一个解决方案，考虑到你的评论！似乎解决了这个问题！事实上确实如此，假设他确实想要一个固定的75像素的垂直维度，尽管他一再重申他没有（这可能是事实）。我刚才看到了，并选择不再发表评论，但如果你想得到我的同意，你已经得到了，先生。：）谢谢你的努力。除非我弄错了，否则这不适用于未知的图像大小。如果我删除宽度和高度，它将失败。如果我的headerleft div中有两个图像，那么它将在不指定图像大小的情况下工作。如果我只有一个图像，它是顶部对齐的。