Divs not aligned to top - html

Question

Why this is happening? I need someone who can explain why divs not aligning properly?
HTML and CSS:
.horizontal-ruler {
width: 100%;
height: 25px;
line-height: 25px;
display: block;
font-size: 14px;
color: #373737;
}
.horizontal-ruler .ruler-unit {
width: 30px;
text-align: center;
display: inline-block;
line-height: 25px;
height: 25px;
vertical-align: middle;
}
.h-ruler-first-line,
.h-ruler-second-line {
width: calc(50% - 15px);
margin: 12px 0;
height: 1px;
background-color: #373737;
display: inline-block;
}
<div class="horizontal-ruler">
<div class="h-ruler-first-line"></div><!--
--><div class="ruler-unit">24"</div><!--
--><div class="h-ruler-second-line"></div>
</div>
https://jsfiddle.net/6xuvr6vw/1/
As you can see the .ruler-unit is not contained into the .horizontal-ruler.

Answer 1

You need to add vertical-align: middle to lines also
.horizontal-ruler {
width: 100%;
height: 25px;
line-height: 25px;
display: block;
font-size: 14px;
color: #373737;
}
.horizontal-ruler .ruler-unit {
width: 30px;
text-align: center;
display: inline-block;
line-height: 25px;
height: 25px;
vertical-align: middle;
}
.h-ruler-first-line,
.h-ruler-second-line {
width: calc(50% - 15px);
vertical-align: middle;
margin: 12px 0;
height: 1px;
background-color: #373737;
display: inline-block;
}
<div class="horizontal-ruler">
<div class="h-ruler-first-line"></div><!--
--><div class="ruler-unit">24"</div><!--
--><div class="h-ruler-second-line"></div>
</div>

Answer 2

You can achieve it with just 2 div elements using :after and :before pseudo elements.
.horizontal-ruler{
text-align: center;
overflow: hidden;
line-height: 25px;
font-size: 14px;
color: #373737;
height: 25px;
}
.horizontal-ruler .ruler-unit {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 10px;
}
.horizontal-ruler .ruler-unit:before,
.horizontal-ruler .ruler-unit:after {
background-color: #373737;
position: absolute;
margin-top: -1px;
width: 9999px;
height: 1px;
right: 100%;
content: '';
top: 50%;
}
.horizontal-ruler .ruler-unit:after {
right: auto;
left: 100%;
}
<div class="horizontal-ruler">
<div class="ruler-unit">24"</div>
</div>

Answer 3

A slightly different approach to your solution -this features a border bottom on the entire div and the a relative position of the text down over the line to give the appearance that it is two line separated by the text content. Could probably be better - just dodgied it up to show you an alternative that does not take much code to achieve the same effect.
.horizontal-ruler{
border-bottom:solid 1px #373737;
text-align:center;
}
.ruler-unit{
font-size:24px;
width:30px;
margin:0 auto;
padding: 0 10px;
position:relative;
top:14px;
background:white;
}
<div class="horizontal-ruler">
<div class="ruler-unit">24"</div>
</div>

Answer 4

Add vertical-align: middle to the lines:
.h-ruler-first-line, .h-ruler-second-line {
width: calc(50% - 15px);
margin: 12px 0;
height: 1px;
background-color: #373737;
display: inline-block;
vertical-align: middle;
}
fiddle: https://jsfiddle.net/udwffajo/