float:center_Experience 交換の CSS クロスブラウザ実装-CSSチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 12:05:14

オリジナル

1459 人が閲覧しました

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

 
リスト 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; 
 } 