Search code examples
htmlcsspositionalignment

Vertical Align (line-height method) not working

My code in my HTML file is as follows:

#firstblock h1 {
    font-family:'Open Sans';
    font-size: 12vh;
    text-align: center;
}
#firstblock {
    position: relative;
    height: 200px;
    line-height: 200px;
}
<div id="firstblock">
  <div id="title">
    <h1>TITLE</h1>
  </div>
</div>

I see no reason why the vertical align is not working. I would appreciate any help, but I would rather not use the table method. Thank you very much.

Solution

  • You were pretty close. Set the margins to 0 on h1 and you will get the expected result.

    #firstblock {
  position: relative;
  height: 200px;
  line-height: 200px;
  border: 1px dotted blue;
}
#firstblock h1 {
  font-family: 'Open Sans';
  font-size: 12vh;
  text-align: center;
  margin: 0;
}
    <div id="firstblock">
  <div id="title">
    <h1>TITLE</h1>
  </div>
</div>