Centering a text field in a div

Question

I am trying to align my text and text box to the center of a div. My main div is centered due margin:0 auto. But I applied this to the text box and didn't work.

<div class="CommentBox">
    Some text :
    <input type="text" />
</div>

CSS

.CommentBox {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
}


input[type="text"] {
    margin:10px auto;
}

http://jsfiddle.net/88pMc/

I have tried everything. As you can see the above code, I added margin:0 auto, but my code is still not working. The text box just does not center out.

Can anyone help me here. I am confused why this does not work, as everywhere I checked is margin:0 autosuggested for center alignment.

Answer 1

You need to add a div inside the div named CommentBox. So your html might be like this:

<div class="CommentBox">
    <div>Some text:
        <input type="text" />
    </div>
</div>

CSS div :

.CommentBox > div {
    margin:0 auto;
    width:250px;
}

: http://jsfiddle.net/L77Bf/

, !!!

Answer 2

:

div css.CommentBox {}, text-align:center;, .

JS Fiddle demo: http://jsfiddle.net/LTatz/

, .

Answer 3

'display: block;' (,

).

Answer 4

( ):

.CommentBox {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
    text-align:center;
}

.CommentBox input[type="text"] {
    display: block;
    margin: 0 auto;
}

:

http://jsfiddle.net/88pMc/20/

Answer 5

, .

<div class='comment'>
  <span>
    <label>some text</label>
    <input type="text" />
  </span>
</div>

CSS:

.comment{
  margin:0 auto;
  width:400px;
  text-align:center;
}
.comment span{
  display:inline-block;
}