display: table-cell;をどこに入れるべきなのか

Question

.flex_test-box {
    padding:  10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
}
.flex_test-item {
    padding: 10px;
    color:  #fff;               /* 文字色 */
}
 
.flex_test-item:nth-child(1) {
    background-color:  #0454a4; /* 背景色指定 */
    width: 50%
}
 
.flex_test-item:nth-child(2) {
    background-color:  #ebf0f5; /* 背景色指定 */
    color:  #5A5F64;            /* 文字色 */
    width: 50%
}

<div class="flex_test-box">
    <div class="flex_test-item">
        <b>あいうえお</b>
    </div>
    <div class="flex_test-item">
        あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
    </div>
</div>

で、ボックスを作っています。

今の状態だと左のボックスの文字が上に寄っているので、これを上下左右中央にしたいと思っております。（左右はすでに中央になっている）

https://www.granfairs.com/blog/staff/centering-by-css
このサイトを参考に、

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

このコードを入れて上下中央にしたいと思っているのですが、どこに入れればいいのでしょうか。
もしくは別のコードを入れたほうがいいのでしょうか。

Answer 1

参考にしたリンク先 の最後に紹介してある display: flex; を使う方法が簡単でしょう。

.flex_test-box {
    padding:  10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
}
.flex_test-item {
    padding: 10px;
    color:  #fff;               /* 文字色 */
    width: 50%;
    display: flex;            
    justify-content: center; /* 左右中央寄せ */
    align-items: center;     /* 上下中央寄せ */
}

.flex_test-item:nth-child(1) {
    background-color:  #0454a4; /* 背景色指定 */
}

.flex_test-item:nth-child(2) {
    background-color:  #ebf0f5; /* 背景色指定 */
    color:  #5A5F64;            /* 文字色 */
}

Codepenサンプル

Comments

[AmiI]

左のボックスの問題は解決されたのですが、今度はなぜか右のボックス入れている文字が、途中で9つ中2つだけ完全な左寄せにならず、ちょっと右に行ってしまいました。なぜでしょうか。

[hatena19]

「途中で9つ中2つだけ」というのは何のことでしょうか。
質問のHTMLの右のボックスには1行のテキストがあるだけですが。

Answer 2

作法通りにするなら、display: table-cell;は単体では使用せず、
親要素へのdisplay: table;の指定とセットで使うのが無難です。

(無難というのは、IE・Edge・Safariなどは「作法通り」でないとバグになることがよくあるためです。その場合、Chromeでは動いているのに何故..? とバグの発見に時間がかかります。)

[案1] .flex_test-boxにdisplay: table;を指定

.flex_test-box {
    display: table;
}
.flex_test-item {
    display: table-cell;
    text-align: center; /* 横方向の中央揃え */
    vertical-align: middle; /* 縦方向の中央揃え */
}

.flex_test-itemはすべてdisplay: table-cell;を指定するのが妥当です。

[案2] .flex_test-itemにdisplay: flex;を指定

.flex_test-box {
    display: flex;
}
.flex_test-item:nth-child(1) {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
}

上記、<b>あいうえお</b>というように、flex_test-itemに子要素を挟んでいるので
IEなどでも安全です。<b>がない場合、IEだと上下中央揃えができなかったりします。

[案3] .flex_test-itemにdisplay: table;、.innerにdisplay: table-cell;を指定

.flex_test-item:nth-child(1) {
    display: table;
}
.flex_test-item:nth-child(1) .inner {
    display: table-cell;
    text-align: center; /* 横方向の中央揃え */
    vertical-align: middle; /* 縦方向の中央揃え */
}

案1か案2がオススメですが、display: flex;とdisplay: table; + display: table-cell;を両方使用したい場合は案3もあり得ると思います。

Answer 3

こんな感じでどうでしょう？

Comments

[yambejp]

<style>
.flex_test-box{
display:flex;
height:200px;
width:600px;
}
.flex_test-item{
border:1px solid #000000;
display:grid;
width:33%;
justify-content: center;/*左右*/
align-items: center;/*上下*/
}
</style>
<div class="flex_test-box">
<div class="flex_test-item">
<b>あいうえお</b>
</div>
<div class="flex_test-item">
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>
<div class="flex_test-item">
<b>かきくけこ</b>
</div>
</div>

[AmiI]

すみません、それですと枠線がある上に、色も全く違うのですが…。
あと、もっと横長で左右のボックスが半分ずつになっているボックスを作りたいと思っております。なので、大きさは今のでよいと思っているのですが、これだと小さすぎます。

[yambejp]

単純に上下左右がセンタリングされることがわかるためのサンプルなんですが・・・
全て書かないと理解いただけないのでしょうか？

・.flex_test-boxにdisplay:flexを設定
・.flex_test-itemにdisplay:gridを設定
justify-content: centerと、align-items: centerを指定

[AmiI]

とりあえず、CSS部分これでやってみたのですが、全くなりません。
それどころかなぜか左のボックスの文字色がグレーになったのですが…。

<style>
.flex_test-box {
padding: 10px; /* 余白指定 */
display: flex; /* フレックスボックスにする */
}
.flex_test-item {
padding: 10px;
display:grid
color: #fff; /* 文字色 */
justify-content: center;/*左右*/
align-items: center;/*上下*/
}

.flex_test-item:nth-child(1) {
background-color: #0454a4; /* 背景色指定 */
width: 50%
}

.flex_test-item:nth-child(2) {
background-color: #ebf0f5; /* 背景色指定 */
text-align: left;
color: #5A5F64; /* 文字色 */
width: 50%
}
</style>

[AmiI]

とりあえず、文字色は(1)に「color: #fff;」を挿入して直しました。

[yambejp]

こういうこと？

<style>
.flex_test-box {
padding: 10px;
display: flex;
}
.flex_test-item {
display: grid;
padding: 10px;
color: #fff;
justify-content: center;
align-items: center
}
.flex_test-box div:nth-child(1).flex_test-item{
background-color: #0454a4;
width: 50%;
}

.flex_test-box div:nth-child(2).flex_test-item{
background-color: #ebf0f5;
color: #5A5F64;
width: 50%;
}
</style>
<div class="flex_test-box">
<div class="flex_test-item">
<b>あいうえお</b>
</div>
<div class="flex_test-item">
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>
</div>

[yambejp]

.flex_test-item:nth-child(n)は機能を誤解していると思うので
よく仕様確認してくださいね
「flex_test-itemクラスのついたn番目」は指定できません
「n番目のHTML要素のうちのflex_test-itemクラスがついたもの」です