Vertical-align on h1 just won't work?

Question

I'm trying to align the text in a h1 vertically to the middle, seeing as the text might wrap it needs to look nice whether it's 1 line or 2.

This is the css I use:

h1 {
  font-size: 12pt;
  line-height: 10pt;
  min-height: 30px;
  vertical-align: middle;
}

The html is quite simply:

<h1>title</h1>

No matter what value I enter for vertical-align, the text is always at the top of the h1 element.

Am I miss-understanding the vertical-align property?

Thanks Dan, I did find that page as well.. the only difference I see for them is that they are doing it on a td element, for the rest I'm doing the same thing.. so I'm not quite sure what I can possibly do differently. — Naatan, Jul 23 '11 at 19:00
futher down on the page they state that `vertical-align` has no effect on elements other than the table cells and inline elements; on block elements it only sets the value to be inherited. so to get vertical centering on those other elements a method other than `vertical-align` must be used. — Dan D., Jul 23 '11 at 19:05
Ahh I see, didn't notice that part. Thanks for the info! I guess I'll have to display it in a table or find a decent css hack. Thanks for your help.. please submit your solution as an answer so I can mark it :) — Naatan, Jul 23 '11 at 19:21

score 14 · Accepted Answer · edited May 23 '17 at 11:53

No CSS hacks needed. If I understand you correctly, then you can use this CSS:

h1 {
    font-size: 12pt;
    line-height: 10px;
    padding: 10px 0;
}

See demo fiddle which equals a minimum height of 30px;

A note about vertical-align: that style only works in conjunction with - and is calculated with regard to - the line-height style. So setting line-height at 10px, putting text with height 12pt leaves no space to align at all. But setting line-height to 30px would result in too much space between more lines of text. This shows a trick for vertical aligning several lines of text, but that is only needed when you have a fixed height container. In this case the container's height (the h1 element) is fluid, so you can use this simple padding solution.

In my case I actually need the predefined height. The link to the trick you provided should do just fine for that! Thanks a lot :) — Naatan, Jul 24 '11 at 03:30

score 5 · Answer 2 · answered Jul 23 '11 at 18:52

5

I dont know about vertical align, but if you add height property and set height and line-height properties same you get the vertical align: center effect

h1
{
    font-size: 12pt;
    line-height: 50px;
    height: 50px;
}

answered Jul 23 '11 at 18:52

hakan

3,284
2
19
25

Thanks, I need the line-height to control the spacing between the text though. – Naatan Jul 23 '11 at 18:58

score 3 · Answer 3 · edited May 27 '21 at 20:49

3

Center the H1 title using flexbox align items center and justify content center, see this example:

div {
padding: 1em;
border: 1px dashed purple;
}

h1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

<div>
<h1>Center this h1</h1>
</div>

edited May 27 '21 at 20:49

Nathaniel Flick

2,902
2
22
31

answered May 27 '21 at 09:42

Andrey Tepaykin

31
2

score 1 · Answer 4 · answered Jul 23 '11 at 18:42

1

Just add a float property and use padding-top: 50% for example:

h1 {
  font-size: 12pt;
  line-height: 10pt;
  min-height: 30px;

  position: absolute;
  float: center; /* If you want it to be centered */
  padding-top: 50%;
}

answered Jul 23 '11 at 18:42

Nathan Campos

28,769
59
194
300

Centering it with padding-top 50% requires another parent element, also I would need to know the generated height of the text in order to offset the padding.. which defeats the purpose. – Naatan Jul 23 '11 at 18:58

score 0 · Answer 5 · answered Mar 02 '21 at 15:06

I used a CSS custom property (variable) and calc

:root {
  --header-height: 100px;
}

* {
  margin: 0;
  padding: 0;
}

header {
  font-size: 16px;
  height: var(--header-height);
  justify-content: space-evenly;
  display: flex;
  border-bottom: 1px solid #000;
}

h1,i {
  font-size: 1.2rem;
  display: inline-block;
  padding-top: calc(var(--header-height) - 1.2rem);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
  <img src="https://placekitten.com/100/100" alt="logo" height="100">
  <h1>
  Kitten Stories
  </h1>
  <i class="fas fa-lock"></i>
</header>

Vertical-align on h1 just won't work?

5 Answers5