CSS cross-browser implementation of float:center_Experience exchange

Copy Code The code is as follows:

• List one


• List two


• List three

We hope that li is floating and centered (the number of li is not fixed and the width of ul is unknown). You can set ul's text-align:center, and then set li's display to achieve centering, but this is not our original intention. We need to implement float:center.

Here we have to review position:relative first, which will offset the position in the normal document flow based on left, right, top, bottom and other attributes. Then we can make ul position: relative; left: 50%, and then let li float to the left, and then make it position: relative; right: 50% (or left: -50%), then li floats to the middle. Same as centered. Without further ado, let’s try it first.

Copy code The code is as follows:

#macji{
position:relative; width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#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;
}