私が何をしようとしているのかはhttp://jsfiddle.net/vW45s/で見ることができます。中央の div には 2 行のテキストがあり、中央の div の下部にあるテキストに隣接する左右のテキストがあります。
テキストをページの中央に配置したいと思います (メインの「hello world」または 2 行目)。width現在、指定されたandを持つ外部 div を使用していますmargin: auto。幅が大きすぎると、テキストが中央に表示されません。内部テキストに対して幅が小さすぎる場合、div は積み重ねられます: http://jsfiddle.net/vW45s/1/。
左右のテキストを中央の div の 2 行目に揃えながら、これら 3 つのフローティング div を中央に配置するより良い方法はありますか?
ヒントをいただければ幸いです。CSS は私の得意分野ではありませんが、学んでいます。
フローティングとセンタリングはうまく混ざりません。何かを中央に配置できるようにするには、ブラウザが要素の幅を判断できなければなりません。幅を決定するには、他のフローティングの幅を知る必要divがあります。それらの幅は、中央に配置する要素の幅によって異なります。
次のオプションがあります。
サイズを割り当てずに動作させるようにしてください。それは可能かもしれません。これに 1 日か 2 日かけて Firefox と Chrome で動作するようにし、1 週間かけて IE で修正する準備をしてください。;)
3 つすべてに幅を割り当てますdiv。
フローティングの代わりに絶対配置を使用します。中央の列の幅を 100% にし、その前に横の列を移動します (1 つは で左にleft: 0、もう 1 つは で右に移動しright: 0ます。どちらも明確な幅が必要です)。これは、ブラウザ ウィンドウのサイズを大きく変更し始めるまで機能します (そして、サイド カラムが中央に重なるようになります)。
tableorを使用しますdisplay: table-cell。これは、テーブル セルが浮動せずに兄弟の幅を認識しているためです。つまり、横の 2 つの列に幅を割り当てて、内側の列を大きくすることができます。
PS: はい、テーブルが悪いという神話については知っています。神話は大幅な単純化です。div2 つの といくつかのスマートな CSSで同じ結果が得られる場合、500 個のテーブルをネストして目的のデザインを取得するのは良くありません。しかし、それは、テーブルをまったく使用してはならないという意味ではありません。
width: 33%とともに、左、右、および中央の div に追加しようとしましたtext-align: centerか?