CSS cross-browser implementation Float:center_ experience Exchange

Copy Code code as follows:

<div id= "macji" >
<ul class= "Macji-skin" >
<li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
</div>

We want to realize that Li is floating and centered (the number of Li is not fixed, the UL width is unknown). can set the UL text-align:center, then set Li's display, can realize center, but this is not our original intention, we need to realize float:center.

Here we have to revisit the position:relative, which offsets the position in the normal document stream based on attributes such as Left,right,top,bottom. Then we can let the UL for position:relative;left:50%, and then let Li like the left float, in Let it position:relative;right:50% (or left:-50%), then Li is like floating in the middle of the center. Don't say much nonsense, try it first.

Copy Code code 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;
}