HTMLテキストはDIV Iは、DIVの中央にテキストを整列させるために上記のコードを使用

Question

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

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

に並びます。コードはうまくいきますが、divの中央に表示させる方法はありますが、もう一方の文字の上に表示する方法はありますか？

例：

Answer 1

ラップ別の要素内のテキスト、および中心その要素。中央揃えの要素は、デフォルトのtext-align: leftのままになります。例えば

：

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

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

またはこの：あなたはこれを実現するために2つのdivを使用することができます

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

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

Answer 2

。最初のdivはテキストを中央に揃え、内側のdivは左に揃えます。

.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

あなたは、別の<div>でテキストを折り返すことinline-block作り、左にその内容を揃えることができます：

.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>