Comment centrer ul en CSS

Aujourd'hui, j'ai rencontré une petite difficulté lors du réglage du centrage de ul. Dans le passé, lorsque j'utilisais ul, je l'arrangeais non pas verticalement mais horizontalement en utilisant l'attribut float:left. Cependant, aujourd'hui, lorsque je faisais des liens conviviaux, il y avait un problème : l'ul ne pouvait pas être centré dans le div. Même si j'ajoutais style="text-align:center;" au div, l'ul ne serait pas centré. Enfin, j'ai soigneusement comparé ceux en ligne et j'ai trouvé. out with Pour la raison de float:left, première vignette, vous pouvez utiliser display:inline pour le style de ul au lieu d'utiliser l'attribut float. Ensuite, vous pouvez utiliser style="text-align:center;" sur le div pour centrer. la liste ul.

1. Supposons que le code d'origine ressemble à ceci :

<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. Supprimez les points noirs devant la liste (utilisez le style de liste dans. le style ul -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>

comme indiqué ci-dessous :

3. Faire apparaître li horizontalement et ul être situé au milieu du div, (li Use style="display:inline;"), comme indiqué ci-dessous

<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>

Comme indiqué ci-dessous :

Jusqu'à présent, le li horizontal in ul a été atteint. Affiché en lignes et ul affiché au centre du div.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!