Question

我目前正在开发一个网站，对于页面标题/帖子标题，我有一个div来设置颜色和一些文本在中心。它适用于Chrome和其他浏览器，但我的文字并不垂直居中于IE。

Website on IE

Chrome

正如您在顶部图像（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>

希望这是足够的信息

谢谢马特

Answer 1

我删除了H1标签的位置：绝对值，它在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>

Answer 2

您可以通过在样式前放置一个星形来设置仅由IE呈现的特定填充。

*padding: 1em;

玩那个 - 它可能会有所帮助。

Answer 3

您可以为标题div

尝试css样式属性vertical-align:middle;

Answer 4

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

请参阅此JSBin：http://jsbin.com/apiqog/24/edit

如果您愿意放弃div#title上的百分比高度，您可以为div#title和h1设置相同的高度，同时给h1一行 - 高度相同。

我正在运行Mac，所以我没有易于访问的IE，但我发现在给定元素上设置高度和行高相同是一种在其中垂直对齐文本的好方法，跨浏览器。

CSS文本以IE为中心

4 个答案: