Wie man eine Liste zentriert

Lernen Sie, wie Sie mit CSS Listen zentrieren.

zentrierte Liste

  • Kaffee
  • Tee
  • Cola

Positionieren Sie die HTML-Liste zentriert

Schritt 1 - Fügen Sie HTML hinzu:

verwenden Sie <ul> Elemente in einem Container-Element einbetten, z.B. <div>:

<div class="container">
  <ul class="myUL">
    <li>Kaffee</li>
    <li>Tee</li>
    <li>Cola</li>
  </ul>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

verwenden Sie <div> Elemente zentriert ausrichten und <ul> Anzeige in inline-block。

oder können Sie die Liste linksbündig ausrichten, um eine sauberere Ansicht zu erhalten:

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

亲自试一试

相关页面

教程：CSS 对齐