CODEWITHSUNDEEP
cssinternet-explorer-7internet-explorer-6
chaonextdoor
chaonextdoor

Reputation: 5139

how to vertically center an element in IE7 and IE6?

I have a div element without fixed height, I want to make it vertically centered inside its parent element regardless of its height. I use the display: table-cell technique for modern browsers but it seems that this technique doesn't work in IE7 and below. Is there some way to achieve this vertically-centered effect in IE7 and below with pure CSS? Thanks in advance.

Upvotes: 1

Views: 2349

Answers (1)

Oriol
Oriol

Reputation: 288520

You can set container's height value to its line-height property, and display:inline-block to the centered element.

HTML:

<div id="container">
    <span>content</span>
</div>

CSS:

#container {
    display: table-cell; vertical-align:middle;
    border:1px solid red;
    height:300px;
    background-color:green;
    width:400px;
    text-align:center;
    line-height:300px; /* Same as height */
}
#container>span{
    background-color:lightblue;
    height:50px;
    width:100px;
    line-height:normal;
    display:inline-block; 
    vertical-align:middle;
}

See it here: http://jsfiddle.net/9TE5t/4/

But be aware that on IE 7 and earlier if you set display:inline-block to a default block element (such as <div>), it will behave like display:block.

Then, you can use default inline elements (such as <span>), or use IE conditional comments and set display:inline (they will behave like display:inline-block) if the browser is IE7 or earlier.

Upvotes: 1

Related Questions