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

【问题标题】：center align button with textbox inside div中心对齐按钮与div内的文本框
【发布时间】：2014-07-09 04:34:39
【问题描述】：

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

但是，按钮似乎没有与文本框居中对齐，而是偏右一点。我也在表单上尝试了“文本对齐”，但这也不起作用。

这里是小提琴： 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;
}

【问题讨论】：

标签： html css input alignment

【解决方案1】：

内联元素对代码中的空白很敏感。移除它们，它们就会正确对齐。

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

jsFiddle example

【讨论】：