我正在构建一个所有内容都居中的登录框。我有一段文字，两个表格字段叠在一起，还有一个按钮。表单字段具有相同的宽度，我只需在它们之间放置换行符（<br />）即可堆叠它们。
由于整个框已经应用了text-align: center;，你会认为两个表格字段完全对齐（一个在另一个上面，两个边缘完美对齐，因为它们是＆＃39; re相同的宽度）？但是，在Firefox中，第二个表单字段向右移动了1或2个像素。
是什么原因引起的？线路断线是否占用了很小的空间，因此甩掉了定心？如果是这样，我该如何预防？
答案 0 :(得分：1)
首先，换行符不会在它周围的内容之前或之后创建任何间距，因此它不是导致间距问题的换行符。完整的代码示例可以帮助但检查以下内容，因为这确实有效并在firefox中完美地对齐它们：
<div style="text-align: center;">
Some text<br />
<input type="text" style="width: 150px;"><br />
<input type="text" style="width: 150px;">
</div>
首先检查页面的文档类型。确保你正确地声明它（xhtml假设你正在关闭你的换行符）。除此之外，鉴于我确定换行符不会在它们之后放置，你应该尝试剥离代码直到找到原因。你可以在其中一个输入框之前有一个不间断的空格（参见http://www.htmlbasictutor.ca/non-breaking-space.htm，因为我不知道如何使stackoverflow写入该字符），这会移动它，或者你可能有一些css给出一个他们是一个边际。你可以在它们上方有一个浮动的元素，它会侵入一个元素并将其移动。
如果所有其他方法都失败了，只需将它们放在自己的div中，而不是使用换行符。在div中包装内容会产生相同的效果。你也可以做清楚：两个;在div上确保没有任何浮动在它上面影响它。