html - 使用 CSS 在页面上居中表单元素

Question

我已经尝试了所有我知道的在 CSS 中居中元素的方法，但我无法让这些表单元素在页面上居中。

我的代码：http: //jsfiddle.net/VJLst/1/

<style>
#divQuizFillBlank {
    margin-left: auto;
    margin-right: auto;
}
#textQuizFillBlankUserAnswer {
    border: 2px solid #000;
    font-size: 16px;
    font-weight: bold;
    width: 80%;
    height: 40px;
    float: left;
    box-sizing: border-box;
    vertical-align: middle;
}
#buttonQuizFillBlankSubmit {
    border: 2px solid #000;
    font-size: 20px;
    font-weight: bold;
    width: 10%;
    height: 40px;
    float: left;
    margin-left: 5px;
}
</style>

<div id="divQuizFillBlank">
<input type="text" id="textQuizFillBlankUserAnswer">
<input type="button" id="buttonQuizFillBlankSubmit" value="&gt;">
</div>

Answer 1

您需要设置widthfor #divQuizFillBlank。

该规则margin: auto;不适用于没有width. 此外，它仅适用于block元素，并且这些元素占据了全部可用宽度。

#divQuizFillBlank {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

更新小提琴：http: //jsfiddle.net/praveenscience/VJLst/2/