Check out the code snippet below:
.fixed-height {
height: 100px;
background-color: green;
}
.fixed-height h1 {
font-size: 14px;
color: red;
display: inline;
vertical-align: middle;
}<div class="fixed-height">
<h1>VERTICAL ALIGN ME</h1>
</div>https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
Vertically Align a Header Tag with Fixed Height through CSS
/*
This https://stackoverflow.com/questions/14695857/vertically-align-a-header-tag-with-fixed-height-through-css
but it doesnt work either, it cuts the div short and isn't in the middle
*/
.fixed-height {
height: 100px;
background-color: green;
display: inline-table
}
.fixed-height h1 {
font-size: 14px;
color: red;
vertical-align: middle;
}<div class="fixed-height">
<h1>VERTICAL ALIGN ME</h1>
</div>- Why is the box getting truncated?
- Why won't it horizontally center?
I realize that I can achieve this by using:
/*
Flex Version
*/
.fixed-height {
height: 100px;
background-color: green;
display: flex;
align-items: center;
}
.fixed-height h1 {
font-size: 14px;
color: red;
vertical-align: middle;
}<div class="fixed-height">
<h1>VERTICAL ALIGN ME</h1>
</div>That's the approach I took to resolve this issue.
However, I am curious as to why vertical alignment doesn't work as expected for inline elements or inline boxes, as described in the documentation.