tags:

views:

186

answers:

4

Hai guys, I want to float a div to center is it possible. Text-align:center is not working in IE...

+2  A: 

There is no float to center per se. If you want to center a block element inside another do this:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

with:

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.

cletus
+2  A: 

The usual technique for this is margin:auto

However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.

And this doesn't actually do a real float.

DigitalRoss
text align center not working in IE ... Ross cab give me any other ans
Pandiya Chendur
Note that 'old IE' means IE 5.x and earlier, which most people don't concern themselves with these days.
David Dorward
Don't you even have to do `text-align: center` on IE6?
brianreavis
Only in Quirks Mode (and you should not be using quirks mode except under truly exceptional circumstances)
David Dorward
A: 

No, it isn't.

You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.

David Dorward
A: 

Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
Huuu