HTML-Text in div align

Question

.test { 
 
    background-color: red; 
 
    text-align: center; 
 
}

<div class="test"> 
 
    This<br>is<br>a<br>test! 
 
</div>

ich den obigen Code verwenden, um den Text in der Mitte eines div auszurichten. Code funktioniert gut, gibt es jedoch eine Möglichkeit, es in der Mitte des Div erscheinen zu lassen, aber immer noch einen Buchstaben über dem anderen zu sehen?

Beispiel:

Answer 1

Wrap der Text in einem anderen Element, und in der Mitte dieses Element. Das zentrierte Element behält den Standardwert text-align: left bei.

Zum Beispiel:

.test { 
 
    background-color: red; 
 
} 
 
.test div { 
 
    margin: 0 auto; 
 
    width: 28px; 
 
}

<div class="test"> 
 
    <div>This<br>is<br>a<br>test!</div> 
 
</div>

Oder diese:

.test { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="test"> 
 
    <div>This<br>is<br>a<br>test!</div> 
 
</div>

Answer 2

Sie können zwei div verwenden, um dies zu erreichen. Das erste div zentriert den Text und das innere div wird nach links ausgerichtet.

.test { 
 
    display:inline-block; 
 
    text-align:left; 
 
}

<div style="text-align: center;background-color: red;"> 
 
    <div class="test"> 
 
    This<br>is<br>a<br>test! 
 
    </div> 
 
</div>

Answer 3

du konnte den Text mit einem anderen <div> wickeln, sie machen und inline-block dessen Inhalte nach links ausrichten:

.test { 
 
    background-color: red; 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    display: inline-block; 
 
    text-align: left; 
 
}

<div class="test"> 
 
    <div class="wrapper"> 
 
     This<br>is<br>a<br>test! 
 
    </div> 
 
</div>