☰

フローティングdivを垂直に揃える 質問する

tag-icon • tag-icon css
フローティングdivを垂直に揃える 質問する

異なるフォント サイズの 2 つの div をフロートさせようとしています。テキストを同じベースラインに揃える方法が見つかりません。私が試したことは次のとおりです。

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

ベストアンサー1

まず、純粋なCSSの方法から。垂直方向の配置は次のようにして下側に揃えることができます。相対+絶対位置指定このような：

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

IE6の動作やメニューなどのz-indexの問題など、いくつかの問題が発生する可能性があります（前回これを試したとき、メニューが表示されませんでした。下絶対的な内容）。

また、すべての要素を絶対配置する必要があるかどうかに応じて、包含要素の高さを明示的に指定するなどの操作が必要になる場合がありますが、これは通常望ましくありません。理想的には、コンテナーがその子に合わせて自動的にサイズ調整されるようにします。

問題は、異なるサイズのフォントのベースラインが一致しないことですが、これを実現する「純粋な」 CSS の方法はわかりません。

しかし、テーブルの場合、解決策は些細な:

<table id="header">
<tr>
  <td id="left">BIG</td>
  <td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>

試してみると、完璧に機能することがわかります。

テーブル反対派は激怒するでしょうが、上記はこれを行う最も簡単で、最もブラウザと互換性のある方法です (特に IE6 のサポートが必要な場合)。

ああ、インライン CSS スタイルよりもクラスの使用を常に優先してください。

おすすめ記事