CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像を中央に配置する方法をわかりやすく解説

Webページを作成していると、「画像を画面の中央に表示したい」という場面によく出会います。CSSを使えば、画像の中央寄せはとても簡単に実現できます。この記事では、最も基本的な方法である margin プロパティを使ったセンタリングの方法を、実際のコード例とともに解説します。

基本の方法：display: block と margin: auto を使う

img要素はデフォルトではインライン要素として扱われるため、そのままでは margin の自動計算が機能しません。そこで、display: block; を指定してブロックレベル要素に変更し、左右のマージンに auto を設定することで、画像が水平方向の中央に配置されます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
</style>
</head>
<body>
<h1 style="text-align: center;">画像を中央に配置する例</h1>
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</body>
</html>

出力結果

上記のコードを実行すると、画像が画面幅の50%のサイズで、水平方向の中央に表示されます。

CSSで画像を中央に配置する方法をわかりやすく解説

ポイントの解説

  • display: block; … img要素をブロックレベル要素に変更し、マージンの自動計算を可能にします。
  • margin-left: auto; / margin-right: auto; … 左右の余白を均等に自動配分することで、画像が中央に寄ります。
  • width: 50%; … 画像の幅を親要素の50%に設定しています。幅を指定しない場合、画像が親要素いっぱいに広がり、センタリングの効果が見えなくなることがあります。

その他の中央寄せの方法

1. text-align を使う方法

画像をインライン要素のまま扱いたい場合は、親要素に text-align: center; を指定するだけで中央寄せできます。

div {
    text-align: center;
}

2. Flexbox を使う方法

より柔軟なレイアウト制御が必要な場合は、Flexboxが便利です。親要素に以下を指定するだけで、縦横どちらにも対応した中央配置が可能です。

div {
    display: flex;
    justify-content: center; /* 水平方向の中央 */
    align-items: center;     /* 垂直方向の中央 */
}

まとめ

画像の中央寄せには、display: block; と margin: auto; の組み合わせが最もシンプルで定番の方法です。状況に応じて text-align や Flexbox も活用すると、より柔軟なレイアウトが実現できます。ぜひ自分のプロジェクトで試してみてください。

  1. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo

  2. CSSでWebサイト全体を水平方向に中央揃えする方法

    CSSを使ってWebサイトのコンテンツを水平方向（左右）に中央揃えするには、max-width と margin: auto を組み合わせるのが最もシンプルで定番の方法です。コンテナ要素の最大幅を指定し、左右のマージンを自動（auto）に設定することで、画面サイズに関わらず要素が常に中央に配置されます。以下に、実際のコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-sc