なぜパディング - 左：50％が最終的に機能しなくなるのですか？

divを中心にしたいので、<div style="padding-left: 50%;"> test </div>と書きます。ブラウザのサイズを非常に小さいサイズに変更するまで、テキストの中心が整えられます。（〜300ピクセル幅）。その後、水平スクロールバーを表示し始めます。なぜパディング - 左：50％が最終的に機能しなくなるのですか？

ブラウザ（Chrome12、Opera11.50、Firefox5）でその動作が実装されるのはなぜですか？私の心の中では、それは単に正しくありません。スクロールバーが必要なコンテンツはありません。コンテンツを無効にするにはどうすればよいですか？

出典

2011-07-04 Blub

"スクロールバーが必要なコンテンツはありません"つまり、「テスト」という言葉は内容ではありませんか？ – BoltClock

中央揃えのdivは通常、paddingプロパティではなくmarginプロパティで処理されます。異なるブラウザではパディングが異なるため、マージンを使用する方が安全です。 –

@BoltClock：テキスト "test"の長さが、300pxブラウザーでスクロールバーを満たすのに十分な長さではありません。なぜスクロールバーが現れるのでしょうか？ – Blub

テキストを使用する場合は、text-align:centerを使用してください。要素を中央に揃えたい場合は、margin:0 autoを使用します。あなたが達成しようとしていることについて、より詳細な情報を提供してください。

overflow propertyを変更することで、スクロールバーの表示を防ぐことができます。

出典

2011-07-04 15:04:33 Radu

私のアプローチがうまくいかない理由は私の質問でした。私は、それはかなり簡単なはずです：私は言う：左に50％のパディングをしてください。それは動作しませんか？ – Blub

@Blub、私はあなたが引用した振る舞いを再現することはできません。参照：http://jsfiddle.net/radu/K36Kq/show/。私はChrome 12、FF3.6.7、Opera 11.10、IE9をテストしましたが、ウィンドウ幅300pxでスクロールバーを表示することはできません。 – Radu

固定幅のコンテナは、マージンを使用して中央揃えにすることができます。左と右のマージンをautoに設定すると、divの中心になります。

<div style="width:900px;margin:0 auto;"> 
    test 
</div>

出典

2011-07-04 15:04:28 Jrod

なぜパディング - 左：50％が最終的に機能しなくなるのですか？

答えて

関連する問題