Cross-browser CSS float: Center

CopyCode The Code is as follows: <Div id = "macji">
<Ul class = "macji-skin">
<Li> List 1 </LI>
<Li> List 2 </LI>
<Li> List 3 </LI>
</Ul>
</Div>

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

here, we need to review position: relative, which is offset in normal document streams based on left, right, top, bottom, and other attributes. Then we can set ul to position: relative; left: 50%, and then let the Li image float left and let it position: relative; Right: 50% (or left:-50% ), then Li is centered like floating in the middle. 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;
}< br> # macji. macji-skin {
float: Left;
position: relative;
left: 50%;
}< BR ># macji. macji-skin Li {
position: relative;
right: 50%;
float: Left;
margin: 10px;
padding: 0 10px;
border: solid 1px #000;
line-Height: 60px;
}