CODEWITHSUNDEEP
css
lolalola
lolalola

Reputation: 3823

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>

Upvotes: 1

Views: 21396

Answers (3)

Nasser Hadjloo
Nasser Hadjloo

Reputation: 12610

use this

body { padding: 0; margin: 0px;}
.Center { margin: 0 auto;}

it is welcome everywhere

Upvotes: 0

mauteri
mauteri

Reputation: 531

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>

Upvotes: 7

salahuddin
salahuddin

Reputation: 74

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.

Upvotes: 0

Related Questions