text-align: center; を使って画像を中央に配置する
2024-04-02
テキスト配置中央を使用して画像を中央に配置する
この方法のメリット:
- シンプルで分かりやすい
- 幅広いブラウザで対応している
- 画像の周りに余白が発生する
- 縦方向に中央揃えしたい場合は別の方法が必要
手順
- HTMLファイルに画像を挿入します。
<img src="image.jpg" alt="画像の説明">
- CSSファイルで、画像の親要素に
text-align: center;を設定します。
.image-container {
text-align: center;
}
- HTMLファイルで、画像を
image-containerクラスで囲みます。
<div class="image-container">
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="画像の説明">
</div>
</body>
</html>
.image-container {
text-align: center;
}
実行結果
補足
- 画像の周りに余白が発生しないようにするには、
margin: 0 auto;を追加します。
.image-container {
text-align: center;
margin: 0 auto;
}
- 縦方向にも中央揃えしたい場合は、
display: flex;とjustify-content: center;を追加します。
.image-container {
text-align: center;
margin: 0 auto;
display: flex;
justify-content: center;
}
- 画像を中央に配置する方法は他にもいくつかありますので、状況に合わせて最適な方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像を中央に配置する</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>画像を中央に配置する</h1>
<div class="image-container">
<img src="image.jpg" alt="画像の説明">
</div>
</body>
</html>
.image-container {
text-align: center;
margin: 0 auto;
}
ポイント
text-align: center;は画像の親要素に設定します。
.image-container {
text-align: center;
margin: 0 auto;
display: flex;
justify-content: center;
}
- 画像のサイズを変更したい場合は、
widthとheightプロパティを使用します。
.image-container img {
width: 200px;
height: 200px;
}
画像を中央に配置する他の方法
<div class="image-container">
<img src="image.jpg" alt="画像の説明">
</div>
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
display: flex;で親要素をフレックスボックスレイアウトにします。justify-content: center;で子要素を水平方向に中央に配置します。
メリット
- 縦横方向に中央揃えが同時にできる
margin: 0 auto; を使用する方法
<div class="image-container">
<img src="image.jpg" alt="画像の説明">
</div>
.image-container {
text-align: center;
}
.image-container img {
margin: 0 auto;
}
position: absolute; を使用する方法
<div class="image-container">
<img src="image.jpg" alt="画像の説明">
</div>
.image-container {
position: relative;
}
.image-container img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 親要素に
position: relative;を設定します。 left: 50%;とtop: 50%;で画像を中央に配置します。transform: translate(-50%, -50%);で画像を元の位置から50%ずつ移動します。
- 細かい調整が可能
- 他の方法より複雑
CSS grid を使用する方法
<div class="image-container">
<img src="image.jpg" alt="画像の説明">
</div>
.image-container {
display: grid;
place-items: center;
}
- 親要素に
display: grid;を設定します。
html css
