Zentrieren Sie einen Satz in einer Zeile CSS

Question

Ich versuche, einen Satz in der Mitte der Seite zu platzieren. Dies ist der Code, den ich kam mit:

#wiz { 
    text-align: center; 
    text-transform: uppercase; 
    color: white; 
    position: absolute; 
    font-family: 'Roboto Mono', sans-serif; 
    top: 250px; 
    left: 50%; 
    right: 50% 
} 

Diese zentriert das txt aber legt jedes Wort auf dem anderen statt auf einer Linie. Ich habe versucht, Höhe, Breite und dann Rand hinzuzufügen, aber ich konnte es zur Arbeit bringen.

Wie würde ich das tun?

Answer 1

Das im Code:

left: 50%; 
right: 50% 

bewirkt, dass das Element einer Breite von Null haben: Der linke Rand ist 50% von der linken Seite, die rechte Grenze von 50% von der rechten Seite ist. Verbleibenden Platz: 0

löschen Nur diese beiden, text-align: center; ausreicht ...

P. S .: Da Position absolut ist, werden Sie eine Breite definieren müssen, für 100% gehen. (Oder verwenden Sie position:relative; statt)

Answer 2

left: 50%; right: 50% - wenn der linke Rand auf halbem Weg über den Behälter und die rechte Seite ist auf halbem Weg über den Behälter, dann ist die Breite der Box 0 sein wird und der Inhalt wird Zeilenumbruch bei der früheren Gelegenheit.

Entfernen Sie position, top, left und right. Wenn das Element standardmäßig kein Block ist, fügen Sie display: block hinzu.

Überlegen Sie, top durch margin-top zu ersetzen.

Answer 3

Änderung dieser:

#wiz { 
    text-align: center; 
    text-transform: uppercase; 
    color: white; 
    position: absolute; 
    font-family: 'Roboto Mono', sans-serif; 
    top: 250px; 
    width: 100%; 

} Das width Attribut werden Sie Behälter die gleiche Breite machen, wie es übergeordneten Container ist. Das Attribut text-align zentriert den Text. Die Attribute left und right versuchen, den Container #wiz von jeder Seite 50% zu machen, was eine effektive Breite von 0 ergibt, die den Text zum Stapeln zwingt.