web-dev-qa-db-ja.com

2つの異なるサイズのテキストを垂直方向に揃える方法は？

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

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

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

csstextvertical-alignmentbaseline
80
JD Isaacks

vertical-align:middle;インラインコンテナで？

編集：それは動作しますが、すべてのテキストは次のようにインラインコンテナになければなりません：

    <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>
139
MatTheCat

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

EditW3Schoolsは行為をクリーンアップしておらず、見た目は粗雑な（せいぜい）情報源であるように見えます。現在は sitepoint を使用しています。参照セクションにアクセスするには、サイトポイントのフロントページの一番下までスクロールします。

5
DwB

テキストの2つのセットは、同じ固定の行の高さと垂直方向の配置を設定する必要があります

 span{
     vertical-align: bottom;
     line-height: 50px;
}
4
Matoeil

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

1
Alex

パーセンテージサイズを使用して、親のline-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}
Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis
1
Creaforge

簡単な方法-flexを使用：

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>
0
Tomas Macek

オプションは、異なるサイズのテキストがそれぞれのセルにあるテーブルを使用し、各セルでalign：middleを使用することです。

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

0
David Mårtensson

これは動作します

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}
<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>
0
Ron Royston