CSSにおけるposition:fixedによるdiv中央およびdiv内要素の中央化の実現方法
2469 ワード
position:fixed実装div中央コードは以下の通りである.
左右を中心にするだけならbottom:0;またはtop:0;削除すれば上下中央だけならleft:0;またはright:0;すぐ
position:fixed実装divが中央になった後、私はこのdivに1枚の画像を置いて、左右の中央を実現して、コードは以下の通りです:
親要素の位置に基づいて、まず全体の位置を右に50%オフセットします.この50%は要素全体を含んでいるので、中央に戻すには要素の半分をオフセットする必要があります.中央に位置合わせします.
div{
position:fixed;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width:200px;
height:150px;
}
左右を中心にするだけならbottom:0;またはtop:0;削除すれば上下中央だけならleft:0;またはright:0;すぐ
position:fixed実装divが中央になった後、私はこのdivに1枚の画像を置いて、左右の中央を実現して、コードは以下の通りです:
.img1{
position: relative;
margin: auto;
padding-left: 50%;
right: 30px;
width:60px;
height:60px;
}
親要素の位置に基づいて、まず全体の位置を右に50%オフセットします.この50%は要素全体を含んでいるので、中央に戻すには要素の半分をオフセットする必要があります.中央に位置合わせします.