HTMLでテキスト画像を垂直方向の中央揃えにする方法

今回は、HTMLテキスト写真を垂直方向に中央揃えにする方法と、HTMLテキストと画像を垂直方向に中央揃えにするための注意事項を紹介します。実際の事例を見てみましょう。

方法 1: ボックスの高さを行の高さと同じに設定する この方法は、テキスト行に適しています。

画像の垂直方向の中央揃えとテキスト行の配置に属性を使用します

vertical-align

小さなアイコンとテキストは垂直方向に配置され、小さなアイコンは背景として挿入されます

// attr: 自分で生成した属性を設定します、選択されている、チェックされているなど、マウスを使用してください。クリックされた値は未定義であるため、独自の属性には prop を使用することをお勧めします

含まれるブロック

要素のサイズと位置の計算は、多くの場合、次のように決定されます。要素が配置されている包含​​ブロック、および包含ブロックは特定の要素領域を指しますが、それを理解すると、要素を簡単に配置できます。
それでは、要素を含むブロックがどこにあるのかをどのようにして知ることができるのでしょうか?

初期包含ブロック

ユーザー エージェント (ブラウザなど) は、ルート要素を包含ブロック (初期包含ブロックと呼ばれます) として選択します。 html の子要素に他に近い包含ブロックがない場合、位置決めは最初の包含ブロックに依存します。
最初の包含ブロックのサイズはどれくらいですか?つまり、HTML が増えてもビューポートのサイズや高さは増加しません。

絶対位置

ではない要素の場合、その要素を含むブロックは、最も近いブロックレベルの祖先要素ボックスのコンテンツ境界で構成されます。 コンテンツの境界から始まるフローティング要素にも同じことが当てはまります。
絶対要素の包含ブロックは、位置が静的ではない最も近い祖先によって確立されます

実際、これは、絶対要素の包含ブロックがインラインで作成されるか、ブロックレベルで作成されるかを考慮する必要があります。要素。インライン互換性は比較的低いため、

インライン要素
にブロックレベルの要素を含めることは一般に避けられ、そのため、含まれるブロックのほとんどはブロックレベルの要素から作成されます。 それを含むブロックは、祖先の境界の内側の境界によって形成されます。
要素に 'position:fixed' 属性がある場合、包含ブロックはビューポートによって作成されます

CSS 画像の中央揃えは、CSS 画像の水平中央揃えと垂直中央揃えの 2 つのケースに分けられます。場合によっては、画像を中央揃えすることも必要です。

ここでいくつかのポイントを説明します: それぞれの中央揃えの状況をそれぞれ紹介します:

CSS 画像の水平方向の中央揃え

1. 画像の水平方向の中央揃えを実現するには、margin: 0 を使用します

画像の中央揃えを実現するには、次のように CSS スタイルの margin: 0 auto を画像に追加します:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" /></div>

2. テキストの水平方向の中央揃え属性を使用します。 text-align: center

コードは次のとおりです:

<div style="text-align: center; width: 500px; border: green solid 1px;"><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></div>

CSS 画像垂直方向のセンタリング

1. 画像の垂直方向のセンタリングを実現するには、height == 行の高さを使用します

このメソッドは高さを使用できることに注意してください。コードは次のとおりです:

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" /></div>

2. テーブルを使用して、画像の垂直方向のセンタリングを実現します。画像

テーブルの使用方法は、テーブルの垂直方向のセンタリング属性を使用することです。コードは次のとおりです。

ここでは、テーブルをシミュレートするために、display: table と display: table-cell; を使用します。 IE6/IE7 は、表示: テーブルをサポートしていません。IE67 をサポートする必要がない場合は、それを使用できます。 欠点: 表示: テーブルを設定すると、絶対配置が変更される可能性があります。画像の垂直方向の中央揃えを実現します

画像の幅と高さがわかっている場合、コードは次のとおりです:

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">   <span style="display: table-cell; vertical-align: middle; ">
       <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
   </span></div>

4. モバイル端末は Flex レイアウトを使用して CSS 画像の垂直方向の中央揃えを実現できます

モバイル 一般的に、クライアント側のブラウザのバージョンが比較的高いので、思い切ってフレックスレイアウトを使うこともできます（フレックスレイアウトについてはcss3のフレックスレイアウトの使い方を参照） デモコードは以下の通りです:

cssコード:

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /></div>

htmlコード:

<style type="text/css">
        .ui-flex {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }
        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
            box-sizing: border-box
        }
        .ui-flex.justify-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
        .ui-flex.center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }
    </style>

あなたはこれを読んだと思います。これらの場合の方法をマスターしました。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS の基本構文の 3 つの紹介

CSS レイアウト ボックス モデルの属性

上下の image タグと view タグの間の解決策

CSS についてブロック
のレベル形式

以上がHTMLでテキスト画像を垂直方向の中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。