CSSでテキストアイコンの位置を揃える方法

開発中、画像とテキストが 1 行に表示されるのが最も一般的です。通常、2 つのインライン要素の位置合わせが最も面倒です。場合によっては、最も一般的に使用される位置合わせ方法最も基本的な例を見てみましょう:

html 部分:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx测试对齐Style-
</div>

推奨チュートリアル: CSS 入門チュートリアル

css 部分:

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }

配置を使用しない場合の影響は次のとおりです:

デフォルトの配置はベースラインです。それは、x 文字の一番下の行です。

これは最初の質問の答えでもありますが、ブラウザの画像とテキストが追加で設定されていない場合、それらは小文字の x の下端に基づいて配置されます (vertical-align:baseline;)。

いくつかの一般的な中央揃えソリューション

1. 垂直方向の中央揃えを使用する

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}

一般的に使用される垂直方向の配置を使用してテキストや画像を揃える場合、実際には以下に示すように、一定の偏差があります。

vertical-align の中央の値は、実際には小文字 x の高さの半分を基準にしているため、画像は次のようになります。 follow x は中央から整列し始めますが、S や中国語などの他の文字の場合は、いずれにせよわずかなずれが発生し、画像が相対的に低くなることがわかります。

2. テキストを折り返すにはvertical-alignとspanを使用します。

少し変更を加えて、テキスト部分をspanタグで囲み、vertical-align: middle; stylealignmentを使用してみましょう。スパン用です。このとき、画像が少し上に移動していることがわかります。

結果は次のとおりです:

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

display: flex;
align-items: center;

ただし、 flex レイアウトの場合、画像サイズが偶数、フォント サイズが偶数、行の高さが偶数の場合は揃えられますが、偶数の場合は若干のずれが生じることがあります。奇数の場合は 1px 高くなります。

4. ex 単位を使用します

ex は小文字 x の高さで、フォントやフォント サイズの影響を受けないインライン要素の垂直方向の中央揃え効果に使用できます。 。

PS: ただし、これは、アイコンの高さがテキストと同じである場合、たとえば、文字の後に矢印が追加されている場合 (クリックして展開) に非常に実用的です。

.wrap img {
    height: 1ex;
}

5.vertical-align 数値メソッドの使用

vertical-align 属性値には、数値タイプとパーセンテージ値を使用できます。たとえば、これは依然として上記の基本的なケースです: 画像の高さの場合は 20px、テキストのフォント サイズが 22px の場合、デフォルトの配置はテキストのベースラインであるため、画像は 2 ピクセル上になります。このとき、配置効果を実現するには、画像を 2 ピクセル下にオフセットするだけで済みます。 vertical-align 属性の数値は非常に良い互換性を持っています。

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
            
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }

推奨される関連ビデオ チュートリアル: css ビデオ チュートリアル

以上がCSSでテキストアイコンの位置を揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。