CSS を使用して画像を中央に配置する方法を調べる

Web デザインでは、通常、画像は不可欠な部分ですが、画像がデザイン仕様を満たしていないか、中央に配置されていない場合、Web サイト全体のレイアウトや美観が損なわれる可能性があります。したがって、画像をどのようにセンタリングするかが注目すべき問題となる。 CSS では、画像を水平方向および垂直方向に中央揃えにするさまざまな方法が利用できます。この記事では、CSS を使用して画像を中央に配置する方法を見ていきます。

1. 水平方向の中央揃え

1. margin:auto

margin:auto の使用は、画像を水平方向の中央に配置できるシンプルで一般的に使用される方法です。このメソッドは、margin 属性の左右の値を auto (margin: 0 auto;) に設定します。これにより、要素をコンテナ内で水平方向の中央に配置でき、単一の画像に適しています。

次のコード:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

Use margin:auto to達成水平方向のセンタリング. ここでは、コンテナ ラッパーの左右のマージンを auto に設定します:

次のコード:

img {  
  display: block;
  margin: 0 auto;
}

画像のマージンを 0 auto に設定することで、水平方向のセンタリングを実現します。

2. text-align:center

text-align:center; を使用して画像やその他のインライン要素を水平方向に中央揃えにできますが、このメソッドは次の場合にのみ機能することに注意してください。画像がコンテナ内に配置される場合。

次のコード:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

コンテナ ラッパーの text-align を center に設定すると、含まれる画像が水平方向に中央揃えになります。

3. position:absolute and left:50%

この属性を使用して、画像のスタイルをposition:absolute and left:50%に設定して画像を作成します水平方向中央揃え。次に、画像の左マージン (margin-left) を画像自体の幅の半分 (width/2) に設定する必要があります。この方法は、画像を水平方向に中央揃えにするだけで気にしない場合に適しています。画像の高さくらい。

次のコード:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

画像の位置を絶対、左:50% に設定して画像の位置を決定し、次に従って margin-left を負の数に設定します。画像を水平方向に中央揃えにするための画像の実際の幅。

2. 垂直方向のセンタリング

1. line-height

画像の高さが要素の行の高さと等しい場合、次のことができます。コンテナ内の画像を中央に配置します 垂直方向に中央に配置します。この方法は、テキストが 1 行しかない状況に適しています。

次のコード:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

コンテナの高さと行の高さを同じ値に設定して、画像を垂直方向の中央に配置します。

2. display:flex と align-items:center

display:flex と align-items:center を使用して、画像やその他の要素をコンテナ内の垂直方向の中央に配置します。この方法は、コンテナ内に垂直方向に中央に配置された複数の要素 (2 つの画像など) が存在する状況に適しています。

次のコード:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

コンテナの表示プロパティを flex に設定し、align-items:center プロパティと justify-content:center プロパティを使用すると、画像が水平方向に中央揃えになり、容器に垂直に入れます。

3. position:absolute および top:50%

position:absolute および top:50% プロパティを使用すると、画像を垂直方向の中央に配置できます。次に、margin-top を画像自体の高さの半分に設定します。

次のコード:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

画像の位置を絶対位置、位置:相対位置に設定することで、ラッパー コンテナーの高さが 200px に設定されます。次に、画像の上部を 50% に設定して画像を垂直方向の中央に配置し、margin-top を画像の高さの半分に設定して垂直方向の中央揃えを実現します。

3. 水平方向と垂直方向の中央揃え

画像を水平方向と垂直方向の中央に配置する必要がある場合は、上記の方法の他の組み合わせを使用できます。

1. position:absolute、top:50%、left:50%

この方法は最も一般的に使用される方法で、position:absolute、top:50%、および left:50% を使用します。 left:50% 属性は、水平方向と垂直方向のセンタリングを同時に実現できます。この方法は、画像を中央に配置する必要がある場合にのみ機能します。

次のコード:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

画像の位置と上と左のプロパティを 50% に設定すると、水平および垂直の中央揃えが実現されます。次に、transform プロパティを使用して、画像を幅と高さの半分だけ左上に移動します (つまり、translate(-50%,-50%))。

2. display:flex、justify-content、align-items を使用する

display:flex、justify-content、align-items 属性を使用すると、複数の画像を作成できます水平方向と垂直方向の中央に配置されます。この方法は、複数の画像が同じ行にあり、同時に Web ページの中央に配置する必要がある状況に適しています。

次のコード:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

コンテナの表示をフレックスに設定し、justify-content プロパティと align-items プロパティを使用することで、画像を同時に水平方向と垂直方向の中央に配置できます。 。

結論

画像を中央に配置することは、Web デザインでよく使用される手法の 1 つです。ページの中央に配置する必要がある複数の画像がある場合、適切な中央配置方法を選択する必要があります。水平方向の中央揃えは、 margin 、 text-align 、およびposition プロパティを使用して実現できます。垂直方向の中央揃えは、 line-height 、 display およびposition プロパティを使用して実現できます。また、水平および垂直方向の中央揃えは、これらのプロパティの組み合わせを使用して実現できます。したがって、Web デザインで適切な画像中央配置方法を選択することは、より良いユーザー エクスペリエンスとより優れたデザイン スタイルを作成するのに役立ちます。

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