円のdivの中央にテキストを垂直に配置する方法は？

Question

私は真ん中に直接テキストを使って円の形をしたdivを作ろうとしています。私はそれを真ん中に水平にすることは簡単ですが、垂直センターでそれを得るのに苦労しています。垂直整列、パディング、ディスプレイなどを試してみましたが、常に最上部にとどまります。

は、ここで問題のHTMLです：

<div class="widget"> 
    <p id='case'>{27 cases}</p> 
</div> 

そして、ここでそのdiv要素のCSSです：私は垂直円の真ん中に正確にテキストを取得しようとしている

.widget { 
    background-color: #ff1122; 
    color: yellow; 
    width: 150px; 
    height: 150px; 
    border-radius: 100%; 
    text-align: center; 
    font-size: 24px; 
    vertical-align: middle; 
} 

。これどうやってするの？

Answer 1

line-heightプロパティを追加する必要があります。 line-heightを円の高さと同じにします（この場合は150px）。

line-height:150px; 

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    vertical-align: middle; 
 
    line-height:150px; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

あなたはフレックスボックスを使用することに開いている場合、あなたはまた、代わりにこれを行うことができます。これは複数の行で動作します。

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
}

<div class="widget"> 
 
    <p id='case'>This is multiple line text.</p> 
 
</div>

Answer 2

display: table-cell; 
vertical-align: middle; 

その後、あなたの円表示にする：テーブルと、

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    vertical-align: middle; 
 
    display:table; 
 
    line-height:150px; 
 
} 
 
p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

Answer 3

これを見てください：

.widget { 
 
    background-color: #f12; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
} 
 

 
.widget * { 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.widget::before { 
 
    content: ""; 
 
    display:inline-block; 
 
    width: 0; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>

Answer 4

を円display: table;を作成し、内部のpはdisplay: table-cell;とvertical-align: middle;を持っています。

.widget { 
 
    background-color: #ff1122; 
 
    color: yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    display: table; 
 
} 
 

 
.widget p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="widget"> 
 
    <p id='case'>{27 cases}</p> 
 
</div>