Question

我创建了一个带有文本框输入和下方按钮的表单。表单放在div中。两个输入具有相同的宽度（200px），div内容使用“text-align”属性与中心对齐。

然而，按钮似乎与文本框中心对齐，而是向右偏移。我也在表单上尝试过“text-align”，但这也行不通。

这里是小提琴： http://jsfiddle.net/leandri/LVsw8/1/

这是HTML：

<div id="div">
    <form id="form">
        <input id="text" type="textbox"/>
        <br/>
        <input id="button" type="button" value="submit"/>
    </form>
</div>

这是CSS：

#div {
    text-align: center;
}
#text {
    width: 200px;
}
#button {
    width: 200px;
}

Answer 1

内联元素对代码中的空白区域很敏感。移除它们并正确对齐。

<div id="div">
    <form id="form">
        <input id="text" type="textbox" /><br/><input id="button" type="button" value="submit" />
    </form>
</div>

<强> jsFiddle example

中心对齐按钮与div内的文本框

1 个答案: