文本对齐和div不居中

问题描述：

我有一个div，我想在中心对齐，水平地说。注意button内，可以在中心对齐......可悲的是，我不能做出同样的包装文本对齐和div不居中

HTML标记：

<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标记：

.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; 
}

在此先感谢

答

你都集中包装，但由于它的宽度填满可用的宽度，你不会看到它的居中。

我认为，要居中的包装，而不是内部的容器：

http://jsfiddle.net/dS9Bc/4/

我不喜欢修改div'grayContainer'，是否有另一种方式来使用div 'wrap'？ – Luis

@ LuisSanchez：是的，你可以使'wrap'与'grayContainer'具有相同的宽度，那么你可以使用'margin：0 auto;'：http://jsfiddle.net/Guffa/dS9Bc/6/ – Guffa

然后，我会使用这个最后的解决方案，thx – Luis

答

页边距右向左&汽车..和只是这种风格添加到您的CSS ..它不是对的jsfiddle

.wrap{ 
margin:0 auto; 
}

我试过了，但是，真实的，它不会对的jsfiddle，这个任何想法工作？ – Luis

它在jsFiddle上工作，他们使用iframe来显示它，所以它就像任何其他网页一样工作。（http://jsfiddle.net/4Fm8D/）编辑：父文档必须填写整个空间，否则将无法工作。我发布的代码不正确，仍然有效。 –

本地尝试.. @Inthntho做得好 – Abudayah

答

设置左，右页边距来auto工作。

margin-left: auto; 
margin-right: auto

甚至更好

margin: 0 auto;

见this。

哦，保证金必须设置在包装的div ...'grayContainer' – Luis

答

您可能还需要设置一个宽度要么.wrap将需要一个增加或设置margin: 0 auto;到.grayContainer

文本对齐和div不居中

相关推荐