CSS position、transform、margin: auto、JavaScriptを使って画像を中央に配置
HTMLとCSSを使って画像をdivの中央に配置する方法
CSSの text-align プロパティを使う
これは、最も簡単な方法です。親要素の text-align プロパティを center に設定することで、その要素内のすべてのテキストと画像が水平方向に中央揃えされます。
<div>
<img src="image.jpg" alt="Image">
</div>
div {
text-align: center;
}
画像の margin プロパティを auto に設定することで、画像の左右に自動的に余白が設定され、水平方向に中央に配置されます。
<div>
<img src="image.jpg" alt="Image">
</div>
img {
margin: 0 auto;
}
CSSの flexbox を使う
flexbox を使うと、要素をより柔軟に配置することができます。親要素に display: flex を設定し、justify-content と align-items プロパティを center に設定することで、画像を水平方向と垂直方向に中央に配置することができます。
<div>
<img src="image.jpg" alt="Image">
</div>
div {
display: flex;
justify-content: center;
align-items: center;
}
CSSの grid を使う
<div>
<img src="image.jpg" alt="Image">
</div>
div {
display: grid;
place-items: center;
}
これらの方法のどれを使うかは、状況によって異なります。どの方法を使うべきか迷ったときは、上記の例を参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像を中央に配置する</title>
</head>
<body>
<div>
<img src="image.jpg" alt="Image">
</div>
</body>
</html>
div {
text-align: center;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像を中央に配置する</title>
</head>
<body>
<div>
<img src="image.jpg" alt="Image">
</div>
</body>
</html>
img {
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像を中央に配置する</title>
</head>
<body>
<div>
<img src="image.jpg" alt="Image">
</div>
</body>
</html>
div {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像を中央に配置する</title>
</head>
<body>
<div>
<img src="image.jpg" alt="Image">
</div>
</body>
</html>
div {
display: grid;
place-items: center;
}
これらのコードを参考に、自分の目的に合った方法で画像を中央に配置してみてください。
画像をdivの中央に配置するその他の方法
画像の position プロパティを absolute に設定し、top と left プロパティを 50% に設定することで、画像を水平方向と垂直方向に中央に配置することができます。ただし、この方法は親要素の position プロパティが relative または absolute に設定されている必要があります。
<div>
<img src="image.jpg" alt="Image">
</div>
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
画像の position プロパティを relative に設定し、transform プロパティを使って translate(-50%, -50%) を設定することで、画像を水平方向と垂直方向に中央に配置することができます。
<div>
<img src="image.jpg" alt="Image">
</div>
img {
position: relative;
transform: translate(-50%, -50%);
}
親要素の width プロパティを固定し、画像の margin プロパティを auto に設定することで、画像を水平方向に中央に配置することができます。
<div>
<img src="image.jpg" alt="Image">
</div>
div {
width: 300px;
}
img {
margin: auto;
}
JavaScriptを使って、画像の位置を動的に調整することもできます。
<div>
<img src="image.jpg" alt="Image">
</div>
const img = document.querySelector('img');
const centerImage = () => {
const div = img.parentNode;
const divWidth = div.clientWidth;
const divHeight = div.clientHeight;
const imgWidth = img.clientWidth;
const imgHeight = img.clientHeight;
img.style.left = `${(divWidth - imgWidth) / 2}px`;
img.style.top = `${(divHeight - imgHeight) / 2}px`;
};
window.addEventListener('resize', centerImage);
centerImage();
html css
