Question

我一直试图永远弄清楚为什么我的包装div（#searchContents）我想用来居中四个项目（text [#inputPrompt]，输入框[#accountName]，提交按钮[＃提交]，加载图像[#wait]）在另一个div（#searchBox）里面不能正常工作。

这是HTML：

<div id="searchBox">
        <div id="searchContents">
            <span id="inputPrompt">Account Name:</span> <input type="text"
                id="accountName" />
            <button id="submit">Submit</button>
            <img id="wait" src="images/ajax-loader.gif" alt="Loading..." />
        </div>
    </div>

这里是CSS：

#searchBox {
    background-color: #181818;
    width: 30%;
    padding: 10px;
    border: 1px solid #383838;
    border-radius: 4px;
    margin-top: 5%;
    margin-left: auto;
    margin-right : auto;
    margin-bottom: 15px;
}
#searchContents {
    margin-left: auto;
    margin-right: auto;
}
#inputPrompt {
    vertical-align: middle;
    line-height: 16px;
}
#accountName {
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 16px;
    height: 16px;
}
#submit {
    width: 20px;
    height: 20px;
}
#wait {
    vertical-align: middle;
    margin-left: 10px;
}

＆＃34; #searchContents＆＃34;是包装器，所以我设置margin-left和margin-right属性来水平对齐包装器中的所有内容，但它似乎仍然是左对齐的。

有人能指出我的问题和解决方案吗？

以上代码的小提琴：http://jsfiddle.net/T58rc/2/

Answer 1

如果您想以#searchContents试试text-align: center

的内容为中心

#searchContents {
    text-align: center
}

这适用于inline和inline-block元素。

<强> Fiddle

您可以使用margin: 0 auto将#searchContents置于其父级中心，但是您需要指定#searchContents的宽度才能使边距自动生效。

Answer 2

试试这个：

HTML：

<body>
    <div id="page">
        <div id="searchBox">
            <div id="searchContents"> <span id="inputPrompt">Steam Account:</span> 
                <input type="text" id="steamName" />
                <button id="submit">Submit</button>
                <img id="wait" src="http://darkstrikerd.files.wordpress.com/2011/08/load.gif" alt="Loading..." />
            </div>
        </div>
    </div>
</body>

CSS：

* {
    color: white;
}
#page {
    background-color: grey;
    height: 300px;
    padding: 10px;
}
#searchBox {
    background-color: #181818;
    width: 30%;
    padding: 10px;
    border: 1px solid #383838;
    border-radius: 4px;
    margin-top: 5%;
    margin-left: auto;
    margin-right : auto;
    margin-bottom: 15px;
}
#searchContents {
    width: auto;
    min-width: 400px;
    max-width: 400px;
    margin: 0 auto;
}
#inputPrompt {
    vertical-align: middle;
    line-height: 16px;
}
#steamName {
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 16px;
    height: 16px;
}
#submit {
    width: 20px;
    height: 20px;
}
#wait {
    vertical-align: middle;
    margin-left: 10px;
}

JSFIDDLE

注意：我已添加宽度：400px;到#searchContents你可以添加另一个宽度，但是当你使用margin: 0 auto;

时添加宽度是必要的

Div Wrapper的内容不会成为中心（水平对齐）

2 个答案: