Align a div to center

Question

I want to float a div to center. Is it possible? text-align: center is not working in IE.

Answer 1

This worked for me..

div.className {
display: inline-block;
margin: auto;
}

Answer 2

floating divs to center "works" with the combination of display:inline-block and text-align:center.

Try changing width of the outer div by resizing the window of this jsfiddle

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

and the css:

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}

Answer 3

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.

Answer 4

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.

Answer 5

This has always worked for me.

Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this

div {        
  margin-left:auto;
  margin-right:auto;
}

Hope this helps.

Answer 6

<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.