How to center ul in css

Today I encountered a little difficulty when adjusting the centering of ul. In the past, when using ul, I used the float:left attribute to arrange it horizontally instead of vertically. However, today I When making some friendly links, there was a problem that the ul could not be centered in the div. Even if I added style="text-align:center;" to the div, the ul would not be centered. Finally, I compared it carefully with the ones online and found out with For the reason of float:left, first tile, you can use display:inline for the style of ul instead of using the float attribute. Then you can use style="text-align:center;" on the div to center the ul list. .

1. Assume that the original code is like this:

<div id="links" style="border:1px solid red;">
<ul>
    <li><a href="#">link111111</a></li>
    <li><a href="#">link2222</a></li>
    <li><a href="#">link33333</a></li>
    <li><a href="#">link44444</a></li>
    <li><a href="#">link555555</a></li>
</ul>
</div>

2. Remove the black dots in front of the list (use list-style in the ul style -type:none;)

<div id="links" >
<ul style="border:1px solid red;list-style-type:none;">
    <li><a href="#">link111111</a></li>
    <li><a href="#">link2222</a></li>
    <li><a href="#">link33333</a></li
    <li><a href="#">link44444</a></li>
    <li><a href="#">link555555</a></li>
</ul>
</div>

As shown in the figure below:

3. Make li appear horizontally and ul be located in the middle of the div, (li Use style="display:inline;"), as shown below

<style type="text/css">
#links {text-align:center;}
#links ul{border:1px solid red;list-style-type:none;}
#links ul li{
display:inline;
}
</style>
<div id="links" >
<ul>
    <li><a href="#">link111111</a></li>
    <li><a href="#">link2222</a></li>
    <li><a href="#">link33333</a></li
    <li><a href="#">link44444</a></li>
    <li><a href="#">link555555</a></li>
</ul>
</div>

As shown in the figure below:

So far, the li horizontal in ul has been achieved Displayed in rows, and ul displayed in the center of the div.

The above is the detailed content of How to center ul in css. For more information, please follow other related articles on the PHP Chinese website!