Question

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

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

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

HTML code：

CSS代码：

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

我希望你能帮助我理解错误。

谢谢！

Answer 1

添加padding并移除.truck_name上的.truck_para。

text-align: center也需要.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也是如此。

<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

作者删除了正确的原始答案，我使用的是灵活盒解决方案，我添加了3行：

ref

这是经过编辑的jsfiddle：https://jsfiddle.net/5qtbkemy/5/

我发现此链接对于快速了解flex-box非常有用：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我希望它有所帮助！

Answer 3

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

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

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

3 个答案: