Ul Li center in CSS

I always thought that the center alignment of UL Li has been mastered. However, during the recent project, it was found that the float: Left method of Li had a problem, that is, it could not be centered (horizontally ), you can only use the padding-left or margin-right method to fix the center. However, the display on the wide screen may be different from that on the narrow screen.

 

This method is mainly implemented by using the floating fixed width of Li. By default, the display of Li is a block. changing this attribute to inline can solve the UL Li center problem.

<Style type = "text/CSS">
# Bnav {
Margin-top: 10px;
Background: # d9ebf5;
Text-align: center;
}
# Bnav ul {
Padding: 4px 0;
Margin: 0;
Overflow: hidden;
}
# Bnav ul Li {
Display: inline;
Padding: 0;
}
</Style>

<Div id = "bnav" class = "bnav">
<Ul>
<Li> <a href = "index. aspx" Title = "home"> Home </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 8 "Title =" About Us "> about us </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 9 "Title =" department Design "> department Design </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 10 "Title =" law declaration "> law declaration </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 11 "Title =" Contact Us "> Contact Us </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 12 "Title =" Application Agent "> Application Agent </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 13 "Title =" Job Services "> job services </a> </LI>
<Li> | </LI>
<Li> <a href = "info. aspx? Info_id = 14 "Title =" Apply link "> apply link </a> </LI>
</Ul>
</Div>
 

Display Effect: Click here to preview

Note that UL should be added with margin: 0; padding: 0; to ensure compatibility with various browsers.