Question

我有一个div，我希望在中心对齐，横向说话。请注意，里面的button可以在中心对齐......遗憾的是我不能为包装器做同样的事情

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

提前致谢

Answer 1

将左右边距设置为auto。

margin-left: auto;
margin-right: auto

甚至更好

margin: 0 auto;

请参阅this。

Answer 2

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

的宽度

Answer 3

你已经将包装器居中，但是当它的宽度填充可用宽度时，你不会看到它的中心。

我认为您希望将容器置于包装器中心：

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

Answer 4

使保证金正确＆amp;离开自动...并且只是将这个样式添加到你的css ..而且它在jsFiddle

上不起作用

.wrap{
margin:0 auto;
}

文本对齐和div不居中

4 个答案: