Center aligning textbox in div

Question

I am trying to align my text and textbox to center of the div. My main div is centered because of margin:0 auto. But I applied this to textbox and its not working.

<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 have added margin:0 auto but still my code is not working. The textbox is just not center aligning.

Can someone help me here. I am confused why this is not working as everywhere I have checked margin:0 auto is suggested for center aligning.

Answer 1

You need to add a div inside the div named CommentBox. So your html can be as such:

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

and you can add a CSS class to act upon this div as such:

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

You can see this here: http://jsfiddle.net/L77Bf/

Hope this helps!!!