Clever Geek Handbook

Vertically center fixed height heading in css

I have a title

<h1>My Header</h1>

It has height 150px

and a font-size

, for example 1.3em;

How to make heading text vertically centered with CSS. I'd rather not wrap it in a container DIV (wrapping divs really beat the whole CSS idea).

+1


source to share


2 answers


Your best bet is to add this rule:

h1 {
    line-height: 150px;
}


You don't need to set the height value, and the font size doesn't affect the vertical alignment.

+3


source


If the header height is 150px, can you also set it line-height

to 150px?



h1
{
    font-size: 1.3em;
    line-height: 150px;
    height: 150px;
}
+3


source






More articles:


All Articles