ホームページ >ウェブフロントエンド >フロントエンドQ&A >画像の CSS div センタリングコードの書き方
画像の CSS div センタリングコードの書き方
- 藏色散人オリジナル
- 2021-01-04 10:22:022968ブラウズ
画像 CSS div センタリング コードの書き方: 最初に表示を table-cell に設定し、次に水平方向のセンタリングを text-align to center に設定し、最後に垂直方向のセンタリングをvertical-align to middleに設定します。
このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。
推奨: "css ビデオ チュートリアル "
本文構造
<body> <div> <img src="1.jpg" alt="haha"> </div> </body>
方法 1:
表示を table-cell に設定します。次に、水平方向の中央揃えの場合は text-align を center に設定し、垂直方向の中央揃えの場合はvertical-align を middle に設定します。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>結果は次の図に示されています。
方法 2:
位置測位によって達成されます。 divを相対配置、imgを絶対配置、左:50%、上:50%に設定すると、画像の左上がdivの中心に位置します。画像が div の中央にある場合は、画像を移動する必要があります。画像の高さの半分を上に、幅の半分を左に移動します。
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}
</style>結果は以下のようになります。
方法 3: 画像または要素の実際の幅と高さが不明瞭な場合に使用できます
これは、やはり位置の測位によって実現されます。 divを相対配置、imgを絶対配置、左:50%、上:50%に設定すると、画像の左上がdivの中心に位置します。画像が div の中央にある場合は、画像を移動する必要があります。画像の高さの半分を上に、画像の幅の半分を左に移動します。要素の幅と高さがわからない場合は、次のコマンドを使用できます。変換:translate(-50%,-50%);
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>方法 4:
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>方法 5:柔軟なレイアウト flex
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>効果は同じです。皆さんのお役に立てれば幸いです!
以上が画像の CSS div センタリングコードの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。