Text-align and div not centered

I have a div that I want to be align in the center, horizontally speaking. Note that the button inside, can be align at the center... Sadly I can't make the same for the wrapper

Here's is the live demo

HTML markup:

<div> <div> <div> name: </div> <div> james </div> <div> last name: </div> <div> bond </div> <div> <input type="submit" value="press me" /> </div> </div> </div> 

CSS markup:

.grayContainer { padding: 15px 10px 10px 10px; width: 450px; background-color: #E7E7E7; border: 2px solid #CCCCCC; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; box-shadow: 0px 0px 6px 2px #CCCCCC; position:relative; behavior: url(/PIE.htc); } .grayContainer label { float: left; width: 200px; text-align: right; color: #656565; /*font-size: 12px;*/ text-shadow: 0 1px 0 white; padding: 8px 13px 10px 0; } .grayContainer .alignCenter { padding: 20px 0; } .alignCenter { text-align: center; } .wrap { margin: 0 auto; } 

Thanks in advance

4 Answers

Set the left and right margins to auto.

margin-left: auto; margin-right: auto 

or even better

margin: 0 auto; 

See this.

You have centered the wrapper, but as the width of it fills the available width you won't see that it's centered.

I think that you want to center the container inside the wrapper instead:

You may need to also set a width either .wrap will need one adding or set margin: 0 auto; to .grayContainer

make margin right & left auto.. and just add this style to your css.. and it's not work on jsFiddle

.wrap{ margin:0 auto; }