CSS Listenelemente mittig jedoch am LI-Element ausrichten?

Dsimon24 · 22. Februar 2021

Moin zusammen!

Folgenden Code habe ich:

HTML:

<html>
    <ul style="text-align: center;">
        <li>Element 1</li>
        <li>Das zweite Element</li>
        <li>Noch Element 3</li>
        <li>Und das letzte Element</li>
    </ul>
</html>

Damit habe ich eine Liste, die ich mittig auf den Bildschirm ausrichte.
Jetzt möchte ich allerdings, dass bspw. von dem längsten Listenelement
ausgegangen wird (das Vierte) und alle Elemente an gleicher Stelle be-
ginnen.

Also Listenelemente mittig, dennoch soll der Beginn jedes
Elementes (bspw. ein -Zeichen) untereinander stehen.

Geht sowas auf einfachem Wege?

VG,

failormooNN · 22. Februar 2021

Moin moin.

Das wird allein mit der List wahrscheinlich nicht so einfach funktionieren.
Du kannst es aber einfach machen, indem Du ein Element drumrum setzt und die Liste darin ausrichtest.

Hier mal ein Beispiel:

HTML:

<div style="width: 500px; text-align: center;">
    <ul style="display: inline-block; text-align: left;">
        <li>Element 1</li>
        <li>Das zweite Element</li>
        <li>Noch Element 3</li>
        <li>Und das letzte Element</li>
    </ul>
</div>

Suche

CSS Listenelemente mittig jedoch am LI-Element ausrichten?

Dsimon24

Lieutenant

failormooNN

Lieutenant

Ähnliche Themen