CSSを使用して画像を垂直方向および水平方向に中央揃えする方法

多くの開発者は、画像の操作中に苦労しています。応答性と位置合わせの処理は特に難しく、特に画像をページの中央に配置するのは困難です。

そのため、この投稿では、さまざまなCSSプロパティを使用して、画像を垂直方向と水平方向の両方で中央揃えにする最も一般的な方法をいくつか紹介します。

以前の投稿でCSSの位置と表示のプロパティを確認しました。これらのプロパティに慣れていない場合は、この記事を読む前にこれらの投稿を確認することをお勧めします。

あなたがそれをチェックしたいならば、これはビデオバージョンです:

画像を水平方向に中央揃え

3つの異なるCSSプロパティを使用して、画像を水平方向に中央揃えすることから始めましょう。

テキスト-整列

画像を水平方向に中央揃えする最初の方法は、text-alignプロパティを使用することです。ただし、このメソッドは、画像が:などのブロックレベルのコンテナ内にある場合にのみ機能します。

 div { text-align: center; } 

マージン:自動

画像を中央に配置するもう1つの方法は、margin: autoプロパティ(左マージンと右マージン)を使用することです。

ただし、margin: auto単独で使用しても画像には使用できません。を使用する必要がある場合はmargin: auto、さらに2つのプロパティを使用する必要があります。

margin-autoプロパティは、インラインレベルの要素には影響しません。以来、タグはインライン要素であり、我々は最初のブロックレベル要素に変換する必要があります。

img { margin: auto; display: block; }

次に、幅も定義する必要があります。したがって、左右の余白は残りの空きスペースを取り、それ自体を自動整列することができます。これにより、トリックが実行されます(幅を100%に指定しない限り)。

img { width: 60%; margin: auto; display: block; }

ディスプレイ:フレックス

画像を水平方向に中央揃えにする3番目の方法は、を使用することdisplay: flexです。text-alignプロパティをコンテナに使用したのと同じように、コンテナにも使用display: flexします。

ただし、display: flex単独で使用するだけでは不十分です。コンテナには、次のような追加のプロパティも必要justify-contentです。

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentプロパティは、一緒に働くdisplay: flex私たちは、水平方向の画像を中央に使用できます。

最後に、画像の幅はコンテナの幅よりも小さくする必要があります。そうしないと、スペースの100%が使用され、中央に配置できません。

重要:このdisplay: flexプロパティは、古いバージョンのブラウザではサポートされていません。詳細については、こちらをご覧ください。

画像を垂直方向に中央揃え

ディスプレイ:フレックス

垂直方向の位置合わせには、を使用するdisplay: flexと非常に役立ちます。

コンテナの高さが800pxであるが、画像の高さが500pxしかない場合を考えてみます。

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

さて、この場合、コンテナに1行のコードを追加するとalign-items: center、次のトリックが実行されます。

div { display: flex; justify-content: center; align-items: center; height: 800px; }

align-itemsと一緒に使用した場合の特性を垂直に要素を配置することができますdisplay: flex

位置:絶対および変換プロパティ

垂直方向の配置のもう1つの方法は、positiontransformプロパティを一緒に使用することです。これは少し複雑なので、段階的にやっていきましょう。

ステップ1:絶対位置を定義する

まず、画像の配置動作をからに変更staticabsoluteます。

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

また、比較的配置されたコンテナ内にある必要があるためposition: relative、コンテナdivに追加します。

ステップ2:上部と左側のプロパティを定義する

次に、画像の上部と左側のプロパティを定義し、それらを50%に設定します。これにより、画像の開始点(左上)がコンテナの中心に移動します。

img { width: 80%; position: absolute; top: 50%; left: 50%; }

手順3:変換プロパティを定義する

しかし、2番目のステップでは、画像を部分的にコンテナの外に移動しました。だから私たちはそれを中に戻す必要があります。

transformプロパティを定義し、そのX軸とY軸に-50%を追加すると、次のトリックが実行されます。

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

物事を水平方向と垂直方向に中央揃えにする方法は他にもありますが、最も一般的な方法について説明しました。この投稿が、ページの中央に画像を配置する方法を理解するのに役立つことを願っています。

Web開発について詳しく知りたい場合は、私のYoutubeチャンネルにアクセスして詳細を確認してください。

読んでくれてありがとう!