CSSで画像を上下中央に表示させる方法

下次还敢
リリース: 2024-04-25 11:57:15
オリジナル
1234 人が閲覧しました

CSS を使用して画像を上下中央に配置する方法には、フレックスボックスを使用する、親コンテナのフレックス方向を列に設定する、コンテンツを揃える、項目を中央に揃えるなどがあります。絶対配置を使用し、画像の位置を絶対、上と左を 50% に設定し、オフセットに変換属性を使用します。グリッド レイアウトを使用するには、親コンテナの表示をグリッドに設定し、アイテムを中央に配置します。 object-fit 属性を使用して画像を中央に配置します

CSSで画像を上下中央に表示させる方法

#CSS を使用して画像を上下に中央に配置する方法

CSS では、次のメソッドを使用して画像を上下の中央に配置できます:

メソッド 1: flexbox を使用します

<code class="css">.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}</code>
ログイン後にコピー

メソッド 2: 絶対値を使用します位置決め

<code class="css">.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>
ログイン後にコピー

方法 3: グリッド レイアウトを使用する

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}</code>
ログイン後にコピー

方法 4: オブジェクトフィット属性を使用する

<code class="css">img {
  object-fit: contain;
}</code>
ログイン後にコピー

方法 5 : パディングを使用する

<code class="css">.container {
  padding: 20px 0;
}

img {
  height: 100px;
}</code>
ログイン後にコピー

方法を選択するための提案:

    画像の周囲に他の要素が必要な場合は、次を使用します。フレックスボックスまたはグリッド レイアウト。
  • 画像サイズが固定されている場合は、絶対配置またはオブジェクトフィット属性を使用します。
  • 画像サイズが固定されていない場合は、フレックスボックスまたはグリッド レイアウトを使用することをお勧めします。

以上がCSSで画像を上下中央に表示させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート