How to div start in center like float left or right? - html

Question

i'm trying to div start in center like float right or left but i didn't do this.
Please help me?
HTML
<div class="conta">
<div class="box">
<p>some text</p>
</div>
<div class="box">
<p>some text</p>
</div>
<div class="box">
<p>some text</p>
</div>
<div class="box">
<p>some text</p>
</div>
</div>
CSS
.conta{width:100%; position:relative; text-align:center}
.conta .box{float:left; width:100px; height:100px; border:1px solid #000; margin:5px;}
I want to start box in center and inline.

Answer 1

there is many possible ways.
One
simplest way this is: margin:0 auto but you need to have fixed width.
DEMO
Two
you can set display:inline-block; to inner element and set text-align:center to the container.
DEMO
HTML
<div>
<div></div>
</div>
CSS
div{
text-align:center;
}
div div{
display:inline-block;
background:gray;
width:200px;
height:100px;
}
Three
set position:relative to the container and position:absolute to the inner element, then set left:50% and margin-left:-100px (margin-left must be half of the width, in this case 100px).
DEMO
CSS
div{
position:relative;
}
div div{
position:absolute;
left:50%;
margin-left:-100px;
background:gray;
width:200px;
height:100px;
}

Answer 2

For block-level items, you can use auto margins to do this (when the item is within the document flow. When you float it, position it other than static, you are taking it out of the document flow.)
div.my-container { margin: 0 auto; }
Will do the trick :)

Answer 3

You can do like this also,
<div id="main" style="text-align:center">
<div id="inner" style="text-align:left;">
I want to be center left.......
</div>
</div>
Now main(outer div) aligned to center and the content div(inner) is aligned left in center. This works fine in IE. You should add margin:0 auto; to make this work in all other browsers.

Answer 4

.myclass{
margin:0px auto;
text-align:center
}