Div包装器的内容不会居中（水平对齐）

Question

我一直在试图永远找出为什么我要使用的包装div（#searchContents）居中于四个项目的中心（文本[#inputPrompt]，输入框[#accountName]，提交按钮[#submit]，加载图片） [#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;
}

“ #searchContents”是包装器，因此我将margin-left和margin-right属性设置为使包装器中的所有内容水平对齐，但似乎仍全部为左对齐。

谁能指出我的问题和解决方案？

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

Answer 1

如果您想将#searchContents的内容#searchContents尝试text-align: center

#searchContents {
    text-align: center
}

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

小提琴

---

您可以使用margin: 0 auto来使#searchContents在其父#searchContents内部居中，然后您需要为#searchContents指定宽度，以使margin auto起作用。

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; 您可以添加另一个宽度，但在使用margin: 0 auto;时必须添加宽度margin: 0 auto;