1

すべてのコンテンツが中央に配置されるログインボックスを作成しています。テキストの段落、2つのフォームフィールドを積み重ねたもの、およびボタンがあります。フォームフィールドの幅は同じで、間に改行（<br />）を入れるだけで積み重ねています。

ボックス全体がtext-align: center;適用されているので、2つのフォームフィールドが正確に並んでいると思いますか（同じ幅なので、両方のエッジが完全に整列した状態で上下に並んでいます）？ただし、Firefoxでは、2番目のフォームフィールドが1〜2ピクセル右にシフトされます。

これの原因は何ですか？改行自体は非常に小さなスペースを占めるため、センタリングが失われますか？もしそうなら、どうすればそれを防ぐことができますか？

4

1 に答える 1

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つの前に改行しないスペースを含めることができます（stackoverflowにその文字を書き込む方法がわからないため、http： //www.htmlbasictutor.ca/non-breaking-space.htmを参照してください）。それを移動するか、いくつかのcssでそれらの1つにマージンを与えることができます。それらの上に浮いた要素があり、それが1つに侵入し、それを移動している可能性があります。

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

于 2011-07-29T16:18:29.700 に答える