CSSレコードテキストアイコン配置のいくつかのソリューション

開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通常最も面倒です。最も一般的に使用される配置方法を使用した場合でも、常にわずかなずれが生じることがあります。最も基本的な例を見てみましょう。

HTML部分:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xxテスト配置スタイル-
</div>

CSS部分:

。包む {
      幅: 300ピクセル;
      テキスト配置: 中央;
      マージン: 20px 自動;
      フォントサイズ: 14px;
 }
 .wrap画像{
      幅: 20px;
 }

アライメントを使用しない場合の効果は次のとおりです。

デフォルトの配置はbaseline 、つまり文字 x の下の線です。

これも最初の質問の答えです。ブラウザの画像とテキストに追加の設定がない場合は、小文字の x の下端、つまりvertical-align:baseline;基準とします。

いくつかの一般的なセンタリングソリューション

1.ページを中央揃えにするにはvertical-alignを使用します

。包む {
    垂直位置合わせ: 中央;
    }
.wrap画像{
    垂直位置合わせ: 中央;
}

一般的に使用されるvertical-alignを使用してテキストと画像を揃えると、実際には以下に示すように一定の偏差が生じます。

vertical-alignの中央の値は、実際には小文字 x の高さの半分を基準としているため、画像は x の中央に揃えられます。ただし、S や漢字などの他の文字の場合は、いずれにしてもわずかな偏差があり、画像が相対的に低くなります。

2. vertical-alignとspanを使ってテキストを折り返す

少し変更して、テキスト部分を span タグで囲み、 vertical-align: middle;スタイルを使用して配置してみましょう。この時点で画像が少し上に移動していることがわかります。効果は以下のとおりです。

3. フレックスレイアウトを使用する

ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。 

ただし、フレックス レイアウトであっても、画像サイズが偶数、フォント サイズが偶数、行の高さが偶数の場合、奇数のときは揃えられ、奇数のときは 1 ピクセル高くなるなど、多少の偏差が生じることがあります。

詳細については、 iconSize 、 fontSize 、 lineHeight

4. exユニットを使用する

この方法は、張新旭の「CSS World」で見たものです。exは小文字xの高さです。フォントやフォントサイズの影響を受けないインライン要素の垂直中央揃え効果を実現できます。PS：ただし、この方法は、文字の後に矢印を追加するなど、アイコンの高さがテキストと一致している状況に適しており、非常に実用的です（クリックして展開）。

.wrap画像{
    高さ: 1ex;
}

5. 垂直方向の数値法の使用

また、Zhang Xinxu の「CSS World」では、 vertical-align属性値に数値とパーセンテージ値を使用できることもわかりました。

例えば、上記の基本的な例を見てみましょう。画像の高さが20pxで、テキストのフォントサイズが22pxの場合

xの場合、デフォルトの配置はテキストのベースラインなので、画像は2px上になります。このとき、配置効果を得るには、画像を2px下に移動するだけでよく、 vertical-align属性の数値型は互換性が良好です。

。包む {
            幅: 100%;
            パディング上部: 200px;
            テキスト配置: 中央;
            マージン: 20px 自動;
            フォントサイズ: 22px;
            高さ: 40px;
            
        }
        .wrap画像{
            幅: 20px;
            垂直方向の配置: -2px;
        }

これで、CSS レコード テキスト アイコンの配置に関するいくつかのソリューションに関するこの記事は終了です。CSS テキスト アイコンの配置に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。