li nicht ausrichten in der Mitte zu ul

Question

Im folgenden Code, ich kämpfe, um die Li HELLO genau in der Mitte der ul auszurichten, aber es wird auf der linken Seite verschoben. Hier suche ich nicht nach einer Lösung (da ich versuche, die Funktionalität durch diesen Code zu üben und zu verstehen). Aber ich suche vor allem nach einem Grund und einer Erklärung, warum dies geschieht.

Obwohl ich den linken/rechten Rand des Li auf auto eingestellt habe. Warum kommt es dann nicht in die Mitte der ul? Für visuelle Hilfe habe ich eine Grenze für li erstellt, so dass Sie leicht ihre genaue Position erkennen können. Ich weiß, dass durch Verringern/Ändern der Breite der ul, dieses Problem behoben werden kann. Aber gibt es keinen anderen Weg, so dass der Text automatisch in der Mitte ausgerichtet wird (ohne die Breite manuell anzupassen, Padding usw.)? Auch wenn ich die Länge des Textes vergrößere oder seine Schriftgröße ändere, möchte ich, dass der Text in der Mitte ausgerichtet wird.

html body { 
 
\t height: 100%; 
 
\t width: 200px; 
 
} 
 

 
ul { 
 
\t background-color: rgba(0,0,0,1); 
 
\t height: 100px; 
 
\t width: 150px; 
 
} 
 

 
li { 
 
\t color: rgba(255,255,255,1); 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t list-style-type: none; 
 
\t width: 50px; 
 
\t text-align: center; 
 
\t border: thin solid rgba(255,255,255,1); 
 
\t float: left; 
 
}

<ul> 
 
<li>Hello</li> 
 
</ul>

Answer 1

Es ist leicht nach rechts, weil die ul eine padding-left standardmäßig hat; Einstellung padding-left: 0; auf die ul wird es komplett links gehen lassen. Dann ist das li nicht zentriert, weil Sie es mit float: left; nach links schweben lassen, damit es die margin: auto; ignoriert, die Sie festgelegt haben. Wenn Sie die float entfernen, wird die li in der Mitte sein.

Ich denke, man die float verwendet, weil es mehr li's in der Liste sein wird, und Sie wollen, dass sie alle auf einer Linie und in der ul zentriert. In diesen Fällen, was ich in der Regel tun ist:

ul { 
    text-align: center; 
} 

li { 
    display: inline-block; 
} 

Beispiel:

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<ul> 
 
    <li>Example1</li> 
 
    <li>Example2</li> 
 
    <li>Example3</li> 
 
</ul>

Answer 2

Ich sehe zwei Probleme hier:

standardmäßig ul Elemente machen mit Polsterung nach links. Dies hat Ihnen diesen Abstand gegeben und möglicherweise Verwirrung erzeugt, wenn das Element nach rechts geschoben wird.

Zusätzlich fügen Sie die float-Eigenschaft zu Ihrem <li> Element hinzu. Entfernen Sie das und Sie sollten Ihre <li> zentriert sehen.

ul { 
    padding: 0; 
    background-color: rgba(0,0,0,1); 
    height: 100px; 
    width: 150px; 
} 

li { 
    color: rgba(255,255,255,1); 
    margin-right: auto; 
    margin-left: auto; 
    list-style-type: none; 
    width: 50px; 
    text-align: center; 
    border: thin solid rgba(255,255,255,1); 
}