97

テキストをブロックの中央に垂直方向に揃えることを知っています。行の高さをブロックと同じ高さに設定します。

ただし、単語が途中にある文がある場合、それは2em. 文全体の行の高さがそれを含むブロックと同じである場合、大きいテキストは垂直方向に配置されますが、小さいテキストは大きいテキストと同じベースライン上にあります。

両方のサイズのテキストが垂直方向に整列するように設定するにはどうすればよいですか?大きなテキストは小さなテキストよりも低いベースラインになりますか?

4

8 に答える 8

159

vertical-align:middle;インラインコンテナを試してみませんか？

EDIT : 動作しますが、すべてのテキストは次のようにインライン コンテナー内にある必要があります。

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

于 2010-10-22T14:54:09.580 に答える
6

「vertical-align」のデフォルトはベースラインであるため、表示されている機能は正しいものです。欲しいようですねvertical-align:top。他のオプションがあります。ここW3Schoolsを参照してください。

編集W3Schools は自分たちの行動を一掃しておらず、いまだに見掛け倒しの (せいぜい) 情報源であるように見えます。私は今sitepointを使用しています。サイトポイントのフロント ページの下部までスクロールして、参照セクションにアクセスします。

于 2010-10-22T14:58:44.767 に答える
1

ただし、技術的にはできませんが、テキストサイズが固定されている場合は、配置 (相対) を使用して大きなテキストを下に移動し、行の高さを小さなテキストに設定できます (この大きなテキストはそのようにマークアップされていると思います)これを CSS セレクターとして使用できます)。

于 2010-10-22T14:53:30.667 に答える
0

オプションは、さまざまなサイズのテキストが独自のセルにあるテーブルを使用し、各セルで align:middle を使用することです。

きれいではなく、すべての場合に機能するわけではありませんが、シンプルで、あらゆるテキストサイズで機能します.

于 2010-10-22T14:59:00.800 に答える