【初心者向け】画像を中央揃え！HTMLとCSSでdiv要素内に画像を水平方向に中央揃えする方法
2024-05-21
HTMLとCSSでdiv要素内に画像を水平方向に中央揃えする方法
Webページを作成する際、画像をきれいに配置することは重要です。特に、div要素内に画像を水平方向に中央揃えしたい場合は、いくつかの方法があります。ここでは、HTMLとCSSを使用して画像を水平方向に中央揃えする方法を2つご紹介します。
方法1： display: flex を使用する
この方法は、flexboxレイアウトプロパティを使用して、要素を簡単に配置する方法です。
HTML
<div class="container">
<img src="image.jpg" alt="画像の説明">
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
説明
.container要素にdisplay: flexプロパティを設定することで、flexboxレイアウトを有効にします。justify-content: centerプロパティは、flexアイテムを水平方向に中央揃えします。
方法2： margin: 0 auto を使用する
この方法は、marginプロパティを使用して、要素を左右に自動的に余白を設定する方法です。
<div class="container">
<img src="image.jpg" alt="画像の説明">
</div>
.container {
text-align: center;
}
img {
margin: 0 auto;
}
.container要素にtext-align: centerプロパティを設定することで、その要素内のすべての要素を水平方向に中央揃えします。img要素にmargin: 0 autoプロパティを設定することで、左右の余白を自動的に設定します。
補足
- 上記の方法は、単一の画像を中央揃えする場合にのみ有効です。複数の要素を中央揃えしたい場合は、flexboxレイアウトまたはCSSグリッドレイアウトを使用する必要があります。
- 画像のサイズが可変の場合、方法2の方が適切です。方法1は、画像のサイズが固定されている場合にのみ適切です。
- どちらの方法を使用する場合でも、ベンダープレフィックスを含めることを忘れないでください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像を中央揃え</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* コンテナの高さを設定 */
background-color: #f0f0f0; /* 背景色を設定（オプション） */
}
img {
width: 100px; /* 画像の幅を設定 */
height: 100px; /* 画像の高さを設定 */
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="画像の説明">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像を中央揃え</title>
<style>
.container {
text-align: center;
height: 200px; /* コンテナの高さを設定 */
background-color: #f0f0f0; /* 背景色を設定（オプション） */
}
img {
width: 100px; /* 画像の幅を設定 */
height: 100px; /* 画像の高さを設定 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="画像の説明">
</div>
</body>
</html>
- 上記のコードは、
image.jpgという名前の画像を中央揃えします。 - 画像のソースパスを
src属性に置き換える必要があります。 - 画像の幅と高さを
widthとheight属性で調整できます。 - コンテナの高さは
heightプロパティで設定できます。 - コンテナの背景色は
background-colorプロパティで設定できます（オプション）。
このサンプルコードをどのように使用するか
- 上記のコードをテキストエディタに保存します。
- ファイル名を
index.htmlに変更します。 - Webブラウザでファイルをを開きます。
画像がdiv要素内に水平方向に中央揃えされていることを確認できます。
div要素内に画像を水平方向に中央揃えするその他の方法
table要素を使用する
この方法は、古いブラウザとの互換性を維持する必要がある場合に役立ちます。
<table>
<tr>
<td>
<img src="image.jpg" alt="画像の説明">
</td>
</tr>
</table>
table {
margin: 0 auto;
}
td {
text-align: center;
}
position: absolute を使用する
この方法は、画像を他の要素とは独立して配置する場合に役立ちます。
<div class="container">
<img src="image.jpg" alt="画像の説明" class="image">
</div>
.container {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
object-fit プロパティを使用する
この方法は、CSS3に対応したブラウザでのみ使用できます。
<div class="container">
<img src="image.jpg" alt="画像の説明">
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* コンテナの高さを設定 */
background-color: #f0f0f0; /* 背景色を設定（オプション） */
}
img {
width: 100%; /* 画像をコンテナの幅に合わせる */
height: auto; /* 画像の縦横比を維持する */
object-fit: contain; /* 画像がコンテナ内に収まるようにフィット */
}
CSSグリッドレイアウトを使用する
この方法は、より複雑なレイアウトを作成する場合に役立ちます。
<div class="container">
<img src="image.jpg" alt="画像の説明">
</div>
.container {
display: grid;
place-items: center;
height: 200px; /* コンテナの高さを設定 */
background-color: #f0f0f0; /* 背景色を設定（オプション） */
}
- シンプルで古いブラウザとの互換性を維持する必要がある場合は、table要素を使用します。
- 画像を他の要素とは独立して配置する場合は、position: absoluteを使用します。
- CSS3に対応したブラウザで画像をコンテナ内に収まるようにフィットさせたい場合は、object-fit プロパティを使用します。
- より複雑なレイアウトを作成する場合は、CSSグリッドレイアウトを使用します。
その他の考慮事項
- 画像のサイズが可変の場合、margin: 0 auto または object-fit プロパティを使用することをお勧めします。
- 画像に余白を設定したい場合は、padding プロパティを使用できます。
html css
