flexboxを使ってテキストを縦に並べるには？

Question

したがって、テキストを垂直方向にセンタリングするのは、justify-contentとalign-itemsを中心としたシンプルなようでしたが、私が注意深く見てみると、テキストが真に中央にないことがわかります。キャラクターの上端にはスペースが少なくなります。私はさらにオンラインで検索して調べようとしましたが、これはhttps://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-alignでしたが、これにはもっと簡単な解決策が必要です。あなたがそれを知覚

例 https://jsfiddle.net/z7cy487o/

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.box { 
 
    height: 10%; 
 
    width: 400px; 
 
    background: #000; 
 
    font-size: 11vh; 
 
    color: #FFF; 
 
    text-align: center; 
 
    padding: 0 20px; 
 
    margin: 20px; 
 
    display: flex; 
 
    justify-content: center; /* align horizontal */ 
 
    align-items: center;  /* align vertical */ 
 
}

<div class="box"> 
 
    C 
 
</div>

Answer 1

このソリューションでは、動的な高さで動作するようですCenter text character ☢ vertically and horizontally within a circle (CSS) の修正バージョンをオフに基づいているが、ヨハネスは彼の答えのコメントに言及して。私はこのソリューションが自分の状況でしかうまくいかないと信じています。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.box { 
 
    height: 10%; 
 
    width: 400px; 
 
    background: #000; 
 
    font-size: 11vh; 
 
    color: #FFF; 
 
    text-align: center; 
 
    padding: 0 20px; 
 
    margin: 20px; 
 
    display: flex; 
 
    justify-content: center; /* align horizontal */ 
 
    align-items: center;  /* align vertical */ 
 
} 
 

 
.char { 
 
    line-height: 1px; 
 
    font-family: sans-serif; 
 
    font-weight: 500; 
 
    position: relative; 
 
    top: 0.05em; 
 
}

<div class="box"> 
 
    <span class="char">C</span> 
 
</div>

Answer 2

方法は、あなたが使用している文字によって異なります。

2番目のバージョンでは、ディセンダー、すなわちベースラインより下に伸びる部分がある文字 "y"のみを使用しました。 line-heightと定義される。一方、全体的には上向きではないので、垂直方向の配置に関する最初のバージョン（文字 "C"）とは正反対のようです。

3番目のバージョンでは、これらの文字を単語に組み合わせて使用​​しました。ここでは、実際に異なる文字/文字が一緒には、が幅全体に広がっていることがわかるので、垂直のセンタリングはそのままです。

行の高さ（およびそれに関連して、文字の垂直方向の配置）ではなくは、どの文字が使用されているかに依存します。特定の状況で使用されていなくても。

html, body { height: 100%; } 
 
.box 
 
{ 
 
    height: 10%; 
 
    width: 400px; 
 
    background: #000; 
 
    font-size: 11vh; 
 
    color: #FFF; 
 
    text-align: center; 
 
    padding: 0 20px; 
 
    margin: 20px; 
 
    display: flex; 
 
    justify-content: center; /* align horizontal */ 
 
    align-items: center; /* align vertical */ 
 
}

<div class="box"> 
 
C 
 
</div> 
 

 
<div class="box"> 
 
y 
 
</div> 
 

 
<div class="box"> 
 
Cyborg 
 
</div>