Why my div is not aligning to middle vertically? - html

Question

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!

Answer 1

Add text-align: center and remove the padding on .truck_name.
.truck_para needs a text-align: center too, as does the div below it.
.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

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!

Answer 3

I often use the line-height to height div element in which vertically centered text:
div {
height: 100px;
line-height: 100px;}