Почему мой div не совпадает со средним по вертикали?

Question

Я не знаю, как это задать ...

Я сделал макет, используя некоторые css, у меня есть контейнер div (.truck_info) с 2 элементами внутри, первый сверху, а второй (.truck_cont) имеет высоту: 100% и вертикальное выравнивание: среднее (оно охватывает весь контейнер), я не знаю, почему элементы внутри этого второго элемента не выровнены по середине, это мой код:

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 также нуждается в 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>

Answer 3

Я часто использую высоту строки в высоту сОн элемент, в котором вертикально центрированный текст:

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