Wie zentriere ich Listenelemente () vertikal innerhalb einer horizontalen ungeordneten Liste ()?

Vertikal ausrichten

Elemente innerhalb von

Vertikale Ausrichtung von

• Elemente innerhalb eines horizontalen
  ist oft aus ästhetischen und praktischen Gründen notwendig. Hier ist eine Lösung:

  CSS kann verwendet werden, um die Zeilenhöhe des

  • festzulegen. Elemente, die ihrer Höhe entsprechen, wie unten:

    <code class="css">li {
        height: 30px;
        line-height: 30px;
    }</code>

    In Ihrem bereitgestellten Code:

    • Jedes
    • hat eine Höhe von 100 Pixel.
    • Schaltflächen haben eine andere Höhe von 50 Pixel (gegeben durch die Klasse .button).

    Um den Inhalt vertikal zu zentrieren, sollten Sie die folgende Zeilenhöhe hinzufügen Werte zu Ihrem Stylesheet:

    <code class="css">.toolbar li {
        line-height: 100px; /* For regular list items */
    }
    .toolbar li.button {
        line-height: 50px; /* For button list items */
    }</code>

    Dadurch wird sichergestellt, dass alle Listenelemente und deren Inhalte vertikal in der Mitte positioniert sind.

    Das obige ist der detaillierte Inhalt vonWie zentriere ich Listenelemente () vertikal innerhalb einer horizontalen ungeordneten Liste ()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!