text-align vs margin vs flexbox vs CSS grid: 画像を水平方向に中央に配置する
2024-04-02
HTMLとCSSで画像をdiv要素内水平方向に中央に配置する方法
text-alignプロパティを使う
これは最も簡単な方法です。親要素であるdiv要素にtext-align: center;を指定することで、その要素内のすべてのコンテンツが水平方向に中央揃えされます。
メリット:
- コードがシンプルで分かりやすい
- すべてのブラウザでサポートされている
- テキストも画像と一緒に中央揃えされてしまう
- 縦方向の中央揃えには対応していない
コード例:
<div style="text-align: center;">
<img src="image.jpg" alt="画像">
</div>
margin: 0 auto;を使う
この方法は、画像要素にmargin: 0 auto;を指定することで、左右のmarginを自動的に調整し、画像を水平方向に中央に配置します。
- テキストと画像を個別に中央揃えできる
text-align: center;よりもコードが少し長くなる
<div>
<img src="image.jpg" alt="画像" style="margin: 0 auto;">
</div>
flexboxは、要素を柔軟にレイアウトするためのCSSレイアウトシステムです。親要素にdisplay: flex;を、子要素にjustify-content: center;を指定することで、画像を水平方向に中央に配置できます。
- 非常に柔軟なレイアウトが可能
<div style="display: flex; justify-content: center;">
<img src="image.jpg" alt="画像">
</div>
<div style="display: grid; place-items: center;">
<img src="image.jpg" alt="画像">
</div>
どの方法を使うかは、プロジェクトの要件やブラウザのサポート状況によって異なります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像を水平方向に中央に配置</title>
<style>
/* 方法1 */
.text-align {
text-align: center;
}
/* 方法2 */
.margin {
margin: 0 auto;
}
/* 方法3 */
.flexbox {
display: flex;
justify-content: center;
}
/* 方法4 */
.grid {
display: grid;
place-items: center;
}
</style>
</head>
<body>
<h1>方法1: text-align</h1>
<div class="text-align">
<img src="image.jpg" alt="画像">
</div>
<h1>方法2: margin</h1>
<div>
<img src="image.jpg" alt="画像" class="margin">
</div>
<h1>方法3: flexbox</h1>
<div class="flexbox">
<img src="image.jpg" alt="画像">
</div>
<h1>方法4: CSS grid</h1>
<div class="grid">
<img src="image.jpg" alt="画像">
</div>
</body>
</html>
上記コードをブラウザで開くと、4つの方法で画像が水平方向に中央に配置されていることを確認できます。
補足:
- 上記コードでは、
image.jpgという画像ファイルを使用しています。このファイル名は、実際に使用している画像ファイル名に置き換えてください。 - 各方法のコードは、必要に応じて変更できます。例えば、画像の幅や高さを指定したり、余白を設定したりすることができます。
positionプロパティを使う
親要素にposition: relative;を、画像要素にposition: absolute;とleft: 50%;とtransform: translateX(-50%);を指定することで、画像を水平方向に中央に配置できます。
- コードが少し複雑になる
<div style="position: relative;">
<img src="image.jpg" alt="画像" style="position: absolute; left: 50%; transform: translateX(-50%);">
</div>
CSS calc()を使う
margin-leftプロパティにcalc(50% - image-width / 2)を指定することで、画像を水平方向に中央に配置できます。
- コードが比較的シンプル
<div>
<img src="image.jpg" alt="画像" style="margin-left: calc(50% - image-width / 2);">
</div>
object-fitプロパティを使う
画像要素にobject-fit: contain;を指定することで、画像を親要素のサイズに合わせて収め、かつアスペクト比を維持することができます。
- 画像が崩れない
- 画像がぼやけてしまうことがある
<div>
<img src="image.jpg" alt="画像" style="object-fit: contain;">
</div>
html css
