改行で区切られた中心要素がFirefoxで正しく整列しない

Question

すべてのコンテンツが中央に配置されているログインボックスを構築しています。私は、テキストの段落、2つのフォームフィールドを重ねて重ねて、ボタンを持っています。フォームフィールドは同じ幅を持ち、それらの間に改行（<br />）を入れるだけでスタッキングしています。

ボックス全体にはtext-align: center;が適用されているため、2つのフォームフィールドが正確に整列していると思われます（同じ幅のため、両端が完全に揃っています）。しかし、Firefoxでは、2番目のフォームフィールドが1〜2ピクセル右にシフトされます。

この原因は何ですか？改行自体が非常に少量のスペースを占めるので、センタリングがスローされますか？もしそうなら、それをどうやって防ぐのですか？

Answer 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）。それ以外にも、改行は後に続くものではないことを確信しているので、原因を見つけるまでコードを削除してください。入力ボックスの1つの前に非改行スペースを持つことができます（http://www.htmlbasictutor.ca/non-breaking-space.htmを参照してください）。これは、それを移動するstackoverflowを作成する方法がわからないため、またはマージンの1つにマージンを与えることができます。それらの上に浮かぶ要素があり、それを侵食して、それをずらすことができます。

その他すべてが失敗した場合は、改行を使用する代わりに、自分のdivに入れてください。 div内の何かを折り返しても同じ効果があります。また、あなたは明確にすることができます：両方; divの上に浮かんだものが何も影響していないことを確認してください。