IE 中的 CSS 文本居中答案

【问题标题】：CSS Text centering with IEIE 中的 CSS 文本居中
【发布时间】：2012-07-03 10:43:17
【问题描述】：

我目前在一个网站上工作，对于页面标题/帖子标题，我有一个 div 来设置颜色，并在中心设置一些文本。它在 Chrome 和其他浏览器上运行良好，但我的文本不在 IE 上垂直居中。

正如您在顶部图像 (IE) 中看到的那样，文本不是垂直输入的，而是在 chrome 中的位置。

我的 CSS 代码

h1 {
    font: 100% Coolvetica, Tahoma;
    font-size: 2.2em;
    text-align: left;
    position: absolute;
    padding-top: auto;
    margin-top: auto;
    margin-bottom: auto;
    left: 4%;
    width: 91.2%;
    height: 0%;
    color: #FFFFFF;
    z-index: 4;
}
#title {
    font: 100%;
    font-size: 1em;
    text-align: left;
    position: absolute;
    left: 0%;
    background: #161616;
    width: 100%;
    min-height: 3.7em;
    height: 3.5%;
    padding-top: 0%;
    margin-bottom: 5%;
    margin-top: 0%;
    color: #FFFFFF;
    -moz-box-shadow: 0px 13px 59px #000000;
    -webkit-box-shadow: 0px 13px 59px #000000;
    box-shadow: 0px 13px 59px #000000;
    z-index: 5;
}

我的 HTML 代码

<div id="title">
<h1>
Hello Welcome to Our Online Shop!!!
</h1>
</div>

希望这是足够的信息

谢谢马特

【问题讨论】：

标签： css internet-explorer text centering

【解决方案1】：

标题div可以试试css样式属性vertical-align:middle;

【讨论】：

vertical-align:middle 仅适用于内联元素。但即使div.title 是内联的，它也只会将h1 与所谓的x-height 对齐。简而言之，不幸的是，vertical-align:middle 几乎从来没有达到你的预期。

【解决方案2】：

我删除了 H1 标签的 position:absolute，它在 IE 中运行良好。

<html>
<head>
<style>

h1{ 
font: 100% Coolvetica, Tahoma; 
font-size:2.2em; 
text-align:left; 
/*position:absolute;*/ 
padding-top: auto; 
margin-top: auto;  
margin-bottom: auto;  
left: 4%; 
width: 91.2%; 
height: 0%; 
color: #FFFFFF; 
z-index:4; 
} 

#title{ 
font: 100%; 
font-size:1em; 
text-align:left; 
position:absolute; 
left: 0%; 
background:#161616; 
width: 100%; 
min-height:3.7em; 
height:3.5%;
padding-top:0%; 
margin-bottom:5%; 
margin-top:0%; 
color: #FFFFFF; 
-moz-box-shadow: 0px 13px 59px #000000; 
-webkit-box-shadow: 0px 13px 59px #000000; 
box-shadow: 0px 13px 59px #000000; 
z-index:5; 
} 
</style>
</head>
<body>
<div id="title"> 
<h1> 
Hello Welcome to Our Online Shop!!! 
</h1> 
</div> 
</body>
</html>

【讨论】：

我在我的身上试了一下还是不行。可能与内容 div 有关。感谢您尝试：D

【解决方案3】：

您可以通过在样式前添加星号来设置仅由 IE 呈现的特定填充。

*padding: 1em;

试一试——它可能会有所帮助。

【讨论】：

这个星号 hack 仅适用于 IE 7 及更低版本，不适用于 IE8+。但是，通常不建议使用任何 IE CSS hack，因为它们中的大部分依赖于无效的 CSS。
如果您不想使用它，那么您可以在标记中使用类查询。

【解决方案4】：

首先，在 Mac OSX 上，文本在 Chrome 19 中似乎没有居中。

查看此 JSBin：http://jsbin.com/apiqog/24/edit

如果您愿意放弃div#title 的百分比高度，您可以将div#title 和h1 设置为相同的高度，并为h1 提供相同数量的行高。

我正在运行 Mac，因此无法轻松访问 IE，但我发现在给定元素上将高度和行高设置为相同是垂直对齐其中文本的好方法，跨浏览器。

【讨论】：