私のdivが縦に真ん中に並んでいないのはなぜですか？

Question

私はこれを求める方法がわかりません...

私はいくつかのCSSを使用してレイアウトを作った、私は2つの要素を持つコンテナdiv（.truck_info）を持っていて、最初のものは上にあり、 2番目の要素（.truck_cont）の高さは100％で、vertical-align：middle（コンテナ全体をカバーしています）では、なぜこの2番目の要素の要素が真ん中に揃っていないのか分かりませんが、これは自分のコードです：

jsfiddle：https://jsfiddle.net/5qtbkemy/

HTMLコード：

<div class="truck_slot" > 
<table class="table_truck"><tbody><tr> 
<td class="truck_colo" style="background-color:#F11; "> 
    <div class="truck_time">Left pane</div> 
</td> 
<td class="truck_info"> 
    <div class="truck_stop" style="background-color:#F11; ">Top line</div> 
    <div class="truck_cont"> 
    <div class="truck_name" style="font-size:28px; ">Middle</div> 
    <div class="truck_para" style="font-size:11px;">Why this text isn't</div> 
    <div>middle align?</div> 
    </div> 
</td> 
</tr></tbody></table> 
</div> 

CSSコード：

.truck_slot{ 
    float:left; 
    width:170px; 
    cursor:pointer; 
    margin:5px 8px; 
} 
.table_truck{ 
    width:100%; 
    height: 155px; 
    padding:0px; 
    border:1px #CCCCCC solid; 
    border-radius:10px; 
    padding:2px; 
    border-collapse: separate; 
    border-spacing: 0px; 
    box-shadow: 2px 2px 3px #999; 
} 
.table_truck td{ 
    font-family:Arial, Helvetica, sans-serif; 
    color: #666; 
} 
.table_truck .truck_colo{ 
    height:100%; 
    width: 55px; 
    text-align: center; 
    vertical-align: top; 
    border-radius: 6px 0 0 6px; 
    color: #FFF; 
} 
.table_truck .truck_time{ 
    font-size:13px; 
    font-weight:bold; 
    font-family: "Calibri", "Century Gothic", Century, Arial, "Arial Black"; 
} 
.table_truck .truck_info{ 
    height:100%; 
    vertical-align: top; 
    color:#666; 
} 
.table_truck .truck_info .truck_info_div{ 
    height:90px; 
    overflow:hidden; 
} 
.table_truck .truck_stop{ 
    border-radius: 0 6px 0 0; 
    padding: 0 5px; 
    color: #FFF; 
    line-height:20px; 
    font-size:13px; 
    font-weight:bold; 
} 
.table_truck .truck_cont{ 
    height: 100%; 
    vertical-align:middle; 
} 
.table_truck .truck_name{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    padding: 0 14px 0 3px; 
    /*margin-bottom:10px*/ 
} 
.table_truck .truck_para{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    padding-left:3px; 
} 

私はあなたが間違っているかを理解するために私を助けることができると思います。

ありがとうございました！

Answer 1

正しいオリジナルの答え者により削除されましたが、どのような私はフレックスボックスソリューションを使用しました。私は3行追加しました：

.table_truck .truck_cont{ 
    height: 85%; 
    vertical-align:middle; 
    display: flex; /* To use flexbox I need to set a flex display */ 
    flex-direction: column; /* to make it vertical I change the direction to column */ 
    justify-content: center; /* finally, I must set the orientation to center */ 
} 

これに編集jsfiddleです：https://jsfiddle.net/5qtbkemy/5/

私はフレックスボックスについてすばやく学ぶために、このリンクは有用であることが判明：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

私はそれが役に立てば幸い！

Answer 2

text-align: centerを追加し、paddingを.truck_nameに削除します。

.truck_paraは、その下のdivと同様にtext-align: centerも必要です。

.truck_slot{ 
 
\t float:left; 
 
\t width:170px; 
 
\t cursor:pointer; 
 
\t margin:5px 8px; 
 
} 
 
.table_truck{ 
 
\t width:100%; 
 
\t height: 155px; 
 
\t padding:0px; 
 
\t border:1px #CCCCCC solid; 
 
\t border-radius:10px; 
 
\t padding:2px; 
 
    border-collapse: separate; 
 
    border-spacing: 0px; 
 
\t box-shadow: 2px 2px 3px #999; 
 
} 
 
.table_truck td{ 
 
\t font-family:Arial, Helvetica, sans-serif; 
 
\t color: #666; 
 
} 
 
.table_truck .truck_colo{ 
 
\t height:100%; 
 
\t width: 55px; 
 
\t text-align: center; 
 
\t vertical-align: top; 
 
\t border-radius: 6px 0 0 6px; 
 
\t color: #FFF; 
 
} 
 
.table_truck .truck_time{ 
 
\t font-size:13px; 
 
\t font-weight:bold; 
 
\t font-family: "Calibri", "Century Gothic", Century, Arial, "Arial Black"; 
 
} 
 
.table_truck .truck_info{ 
 
\t height:100%; 
 
\t vertical-align: top; 
 
\t color:#666; 
 
} 
 
.table_truck .truck_info .truck_info_div{ 
 
\t height:90px; 
 
\t overflow:hidden; 
 
} 
 
.table_truck .truck_stop{ 
 
\t border-radius: 0 6px 0 0; 
 
\t padding: 0 5px; 
 
\t color: #FFF; 
 
\t line-height:20px; 
 
\t font-size:13px; 
 
\t font-weight:bold; 
 
} 
 
.table_truck .truck_cont{ 
 
\t height: 100%; 
 
\t vertical-align:middle; 
 
} 
 
.table_truck .truck_name{ 
 
\t font-family:Arial, Helvetica, sans-serif; 
 
\t font-weight:bold; 
 
\t padding: 0; 
 
\t /*margin-bottom:10px*/ 
 
    text-align: center; 
 
} 
 
.table_truck .truck_para{ 
 
\t font-family:Arial, Helvetica, sans-serif; 
 
\t font-weight:bold; 
 
\t padding-left:3px; 
 
    text-align: center; 
 
}

<div class="truck_slot" > 
 
<table class="table_truck"><tbody><tr> 
 
<td class="truck_colo" style="background-color:#F11; "> 
 
    <div class="truck_time">Left pane</div> 
 
</td> 
 
<td class="truck_info"> 
 
    <div class="truck_stop" style="background-color:#F11; ">Top line</div> 
 
    <div class="truck_cont"> 
 
    <div class="truck_name" style="font-size:28px; ">Middle</div> 
 
    <div class="truck_para" style="font-size:11px;">Why this text isn't</div> 
 
    <div style="text-align: center">middle align?</div> 
 
    </div> 
 
</td> 
 
</tr></tbody></table> 
 
</div>

私は、多くの場合、垂直方向にテキストを中心とした高さのdiv要素に行の高さを使用

Answer 3

：

div { height: 100px; line-height: 100px;}