为什么我的 div 没有垂直居中对齐？

Question

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

我使用一些 css 做了一个布局，我有一个容器 div (.truck_info)，里面有 2 个元素，第一个在顶部，第二个一个 (.truck_cont) 有一个 height: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

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

.truck_para 也需要一个 text-align: center，下面的 div 也是如此。

.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;
 /*margin-bottom:10px*/
  text-align: center;
}
.table_truck .truck_para{
 font-family:Arial, Helvetica, sans-serif;
 font-weight:bold;
 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 2

我经常使用 line-height to height div 元素，其中垂直居中的文本：

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

Answer 3

正确的原答案被作者删掉了，我用的是flex-box方案，我加了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/

我发现这个 link 对快速学习 flex-box 很有用：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望对您有所帮助！

为什么我的 div 没有垂直居中对齐？

Why my div is not aligning to middle vertically?

html

css

vertical-alignment