vertical center content
i have one div and some text inside it. to make my content horizontally and vertically center i use a css. it works fine in firefox but content not being vertically center when test the following code in IE6.
so please guide me what i need add or change in my css.
my html code is
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
height: 200px;
width: 250px;
}
</style开发者_Go百科>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>
please have look at my css and tell me why it is not working in IE also please rectify my css in such a way as a result it should look same in all the browser.
thanks
you can wrap your text with a span and then set position:relative and top:45%;
.content span {
position:relative;
top:48%;
}
live example: http://jsbin.com/ovabo4/3
Here you will find a great guide: Vertical centering with CSS
A good method is to do this, so it is always exactly in the middle (only works if you have a fixed height div)
<div class="centered"></div>
html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */
加载中,请稍侯......
精彩评论