ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSボックス内で画像を中央に配置する方法
CSSボックス内で画像を中央に配置する方法
- 青灯夜游オリジナル
- 2021-02-23 15:59:2716298ブラウズ
センタリング方法: 1. ボックスの相対位置と画像の絶対位置を設定し、画像の位置を調整します。 2. img 画像要素をブロックレベル要素として設定し、table-cell と「vertical-align:middle;」を使用して中央に配置します。 3. フレックスボックスレイアウトを使用して中央に配置します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css で画像を div ボックスの中央に配置します
##最初の方法: css のposition 属性を使用します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="div1">
<img src="img/1.jpg" / alt="CSSボックス内で画像を中央に配置する方法" >
</div>
</body>
</html>レンダリング:
2 番目: css3 table-cell、vertical-align:middle;
nbsp;html>
<meta>
<style>
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
<div>
<img alt="CSSボックス内で画像を中央に配置する方法" >
</div>
# の新しい属性を使用します。 ##効果:
[推奨チュートリアル:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="div">
<img src="img/1.jpg" / alt="CSSボックス内で画像を中央に配置する方法" >
</div>
</body>
</html>効果:
nbsp;html>
<meta>
<style>
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div>
<img alt="CSSボックス内で画像を中央に配置する方法" >
</div>
レンダリング:
以上がCSSボックス内で画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。