float:center_Experience 交換の CSS クロスブラウザ実装

コピーコード コードは次のとおりです。

• リスト 1


• リスト 2


• リスト 3

li がフローティングで中央に配置されることを望みます (li の数は固定されておらず、ul の幅は不明です)。 ul の text-align:center を設定してから、li の表示を設定してセンタリングを実現することもできますが、これは本来の目的ではないため、float:center を実装する必要があります。

ここでは、最初にposition:relativeを確認する必要があります。これにより、左、右、上、下、その他の属性に基づいて通常のドキュメント フロー内の位置がオフセットされます。次に、ul 位置:相対;左:50% にして、次に li を左にフロートさせ、次に位置:相対; 右: 50% (または左: -50%) にして、li を中央にフロートさせます。 . 中央に同じ。さっそく試してみましょう。

コードをコピー コードは次のとおりです。

#macji{
位置:相対; 幅:100%;
高さ:80px;
背景色:#eee;
テキスト整列:センター;
オーバーフロー:非表示;
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative ;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}