为什么我的div不是垂直对齐中间的？

Question

我不知道怎么问这个...

我做了一个使用一些CSS的布局，我有一个容器div（.truck_info），里面有2个元素，第一个是在顶部，和第二个（.truck_cont）有一个高度：100％和vertical-align：middle（它覆盖了整个容器），我不知道为什么第二个元素里面的元素没有对齐到中间，这是我的代码：

的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/

我发现这个链接有用的快速了解Flex-箱：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我希望它能帮助！

Answer 2

添加text-align: center并删除.truck_name上的padding。

.truck_para也需要text-align: center，就像下面的div一样。

.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

我经常使用的line-height身高div元素中垂直居中文本：

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