Vertical alignment on h1 just won't work?

Question

I am trying to align the text in h1 vertically to the middle, because since the text can be wrapped, it should look good, be it 1 line or 2.

This is the css I'm using:

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

html is pretty simple:

 <h1>title</h1> 

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

Am I missing an understanding of the vertical-align property?

Answer 1

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

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

See the demo script , which is equal to the minimum height of 30 pixels;

Note on vertical alignment: this style only works in conjunction with - and is calculated in relation to the line-height style. Thus, setting the line height to 10 pixels, placing text with a height of 12pt, leaves no room for alignment. But setting the line height to 30 pixels will result in too much space between too many lines of text. This shows a trick for vertically aligning several lines of text, but this is only necessary when you have a container with a fixed height. In this case, the height of the container (element h1) is fluid, so you can use this simple addition.

Answer 2

I don't know about vertical alignment, but if you add a height property and set the height and line height properties, you get vertical alignment: the center effect

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

Answer 3

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%; }