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...
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
HTML markup:
<div class="wrap">
<div class="grayContainer">
<div class="editor-label">
name:
</div>
<div class="editor-field">
james
</div>
<div class="editor-label">
last name:
</div>
<div class="editor-field">
bond
</div>
<div class="alignCenter">
<input type="submit" value="press me" class="" />
</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;
}
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
