Search code examples
htmlcssvertical-alignment

Why my div is not aligning to middle vertically?

I don't know how to ask this...

I made a layout using some css, I have a container div (.truck_info) with 2 elements inside, the first one is on the top, and the second one (.truck_cont) has a height:100% and vertical-align:middle (it covers the whole container), I don't know why the elements inside this second element are not aligned to middle, this is my code:

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

HTML code:

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

.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;
}

I hope you can help me to understand what is wrong.

Thank you!

Solution

  • The correct original answer was deleted by the author, what I used was a flex-box solution, I added 3 lines:

    .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 */
}

    This is the edited jsfiddle: https://jsfiddle.net/5qtbkemy/5/

    I found this link useful to learn quickly about flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    I hope it helps!