Hur man centrerar listor

Lär dig hur du använder CSS för att centrera listor.

centrerad lista

  • Kaffe
  • Té
  • Cola

centrera HTML-listan

Steg 1 - Lägg till HTML:

placera <ul> elementer innesluts i en kontainer-element, till exempel <div>：

<div class="container">
  <ul class="myUL">
    <li>Kaffe</li>
    <li>Té</li>
    <li>Cola</li>
  </ul>
</div>

Steg 2 - Lägg till CSS:

placera <div> elementer centreras, och <ul> visning ändras till inline-block。

eller, du kan vänsterjustera listobjekt för att få en mer ren vy:

div.container {
  text-align: center;
{}
ul.myUL {
  display: inline-block;
  text-align: left;
{}

Prova själv

Relaterade sidor

Lär dig:CSS-alignering