css: vertical and horizontal align, IE
this code work fine with FF and Chrome, but with IE not.
How fix this code with IE (9,8,7)?
<html>
<head>
<style type='text/css'>
.center{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub开发者_开发知识库{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
</body>
The reason it's not working in IE9/8 is because you are missing your DOCTYPE. It still won't work in IE7, but if you make your span display block and adjust your margins, you can get it to look the same. See my example:
<!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>
<style type='text/css'>
.center{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
</style>
<!--[if IE 7]>
<style type='text/css'>
.sub {
display: block;
margin: 70px auto;
</style>
<![endif]-->
</head>
<body>
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
</body>
vertical-align: middle to the div will not vertically center its contents. It will attempt to align the paragraph with the previous and following elements. Since the div is a block level element (and, so are the surrounding elements), vertical-align: middle will have no effect at all.
you can use line height to center its content.
use this
body { padding: 0; margin: 0px;}
.Center { margin: 0 auto;}
it is welcome everywhere
加载中,请稍侯......
精彩评论