CODEWITHSUNDEEP
htmlcsspositionalignment
user3601313
user3601313

Reputation: 3

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.

Upvotes: 0

Views: 71

Answers (4)

lrd
lrd

Reputation: 302

Try this:

  #firstblock {
  position: relative;
  height: 100%;
  line-height: 200px;
  border: 1px dotted blue;
}

 #firstblock h1  {
 font-family: 'Open Sans';
 font-size: 12vh;
 text-align: center;
 border: solid 5px #acecaa;
 margin:50% 0% 50% 0%;
 }

Upvotes: 0

dgas02
dgas02

Reputation: 88

ok try this. Add width 100% to #firstblock and instead of vertical-aligning the h1 we're going to style the parent div.

#firstblock {display: table; width: 100%;}
#firstblock #title {
   display: table-cell;
   height: 100%;
   text-align: center;
   vertical-align: middle;
   width: 100%;
}

Unfortunately to vertical align it on the whole page using 100% all parent elements have to have a height of 100%. So try applying a height of 100% to all parent elements.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46825

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>

Upvotes: 1

dgas02
dgas02

Reputation: 88

When I view the code it is vertical aligning the heading. Do you have a line-height already set on the H1 in an earlier instance in your code? You may have to set the line-height on the H1 instead of the wrapping div. The only other way is to:

#firstblock {display: table;}
#firstblock h1 {display: table-cell; vertical-align: middle}

Upvotes: 0

Related Questions