开发者

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 */
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜