CSSの中央問題
1432 ワード
CSSが中央に位置するのは主に2種類に分けられる水平中央(水平中央は行内要素中央と塊状要素中央と定幅要素中央に分かれる) 垂直中央 一、水平中央行内エレメント中央 を使用できない.ブロック要素中央定幅: を実現する.
二、垂直中央親要素の高さが決定する単行テキストの垂直中央に親要素のheightとline-heightを常に垂直中央 を実現するように設定する.親要素の高さを決定する複数行のテキストを垂直に中央に配置する方法1:親要素
text-align:center; ps:行内エレメントまたはブロックエレメントに適用するdisplayがinlineに設定されたエレメントは、親エレメントにtext-align:center;を加えることができるが、子エレメントがfloatの影響を受けるエレメントはmargin:0 auto;不定幅:方法1:display:table;margin:0 auto;方法2:ブロックレベル要素のdisplayをinlineタイプ(行内要素表示に設定)に変更し、text-align:centerを使用して中央効果を実現します.方法3:親要素にfloatを設定し、親要素にposition:relativeおよびleft:50%を設定し、子要素にposition:relativeおよびleft: -50%を設定することによって、水平中央二、垂直中央
height:60px;line-height:60px; display:table; vertical-align:middle; display:table-cell; /*IE8 Chrome、Firefox*/
vertical-align:middle; /*IE8 Chrome、Firefox*/
positon:relativeを書いて、このようにするのは子要素にposition:absoluteを打ったときに外宇宙に位置決めされないためです.次に、サブエレメントのheightとwidthを書きます.これは必須のようですが、一部のブラウザでは解析時にこの2つの値がなければ予想外のずれが発生します.次に、方法全体の核心であり、サブ要素にtop:50%;left:50%およびmargin-top:半分`のheight値の負の数を与える.margin-left:weight値の半分の負の数.{
width:100px;
height:80px;
position:absolute;
top:50%;
left:50%;
margin-left:50px;
margin-top:40px
}