ホームページ > 記事 > ウェブフロントエンド > CSSのimgは幅と高さがわかりません。センタリングを実現する方法
3 方法: 1. text-align 属性を使用して、img を含む親要素に「text-align: center;」を設定します。 2. フレキシブルボックスレイアウトを使用し、親要素に「display: flex;justify-content: center;」を設定します。 3. グリッドレイアウトを使用し、親要素に「display:grid;align-items:center;justify-items:center;」を設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
方法 1: テキスト配置属性 text-align
text-align を使用して、要素内のテキスト行の配置を制御します。 img の親 div を設定して、img を div のテキストにすることができ、text-align を使用して div 属性を変更できます。 (親要素に属性を追加します)
注: 子要素は inline または inline-block である必要があります。子要素も div である場合は、子に対して display: inline/inline-block を設定する必要があります。ここでは子要素 img がインラインであるため、この手順は省略します。 この方法は、img の中央揃えなどのインライン要素に適しています
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #pic { border: 1px solid red; text-align: center; /*表示div的子元素居中*/ } </style> </head> <body> <div id="pic"> <img src="img/2.jpg" class="logo" alt="CSSのimgは幅と高さがわかりません。センタリングを実現する方法" > </div> </body> </html>
#方法 2: フレキシブル ボックス レイアウトを使用する
css#pic { display: flex; justify-content: center; }フレキシブル ボックス レイアウトは、数行の CSS を使用して、ほぼすべてのレイアウトを実現できます。そして最も驚くべきことは、画像のレイアウトや位置を考慮することなく、n 枚の画像の上 2 行を中央に配置できることです。
方法 3: グリッド レイアウトを使用する
フレキシブル ボックスは、ナビゲーション バーで最も一般的に使用されます。対照的に、グリッド レイアウトはユニバーサル レイアウト システムです。#pic { display: grid; align-items: center; /*块级方向(纵向)上的全部栅格元素居中对齐*/ justify-items: center; /*行内方向(横向)所有的元素中线对齐*/ }#したがって、複数の画像を整列させる問題に対処するのに非常に便利です。 (学習ビデオ共有:
Web フロントエンド )
以上がCSSのimgは幅と高さがわかりません。センタリングを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。