Question

I have a header tag, with a fixed width, that in some instances will contain 2 lines of text, in some cases 1. I’d like them to vertically align in the center, as if the padding was already figured out to compensate for this.

I’m hoping to accomplish this without modifying the mark-up.

<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>

CSS:

h1 {
float:left;
margin:5px;
padding:5px;
width:100px;
height:50px;
vertical-align:middle; /*obvi doesn't work because it's not an inline element */
text-align:center;
background:#336699;
color:#fff;
}

Maybe… like a CSS selector that determines 2 different padding properties based on an automatic height? Like, if I set the height to auto, and if the header tag exceeds 60px (what it would be for 2 lines), then make the padding this, but if the automatic height is less than that, then make the padding this….

h1[height>60px] { padding:10px 0px; }
h1[height<60px] { padding:20px 0px; }

I hope that makes sense. I’m just not sure how to write it… or is there a better way?

Please see example.

http://jsfiddle.net/KcD3v/

Many thanks SO

Answer 1

You can try to do something like that:

HTML

<div class="header">
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
</div>

CSS

.header {
    display: inline-table; /* IE8+, Chrome, FF3+, Opera7+ */
}

h1 {
    display: table-cell;
    margin:5px;
    padding:5px;
    width:100px;
    height:50px;
    vertical-align: middle;
    text-align:center;
    background:#336699;
    color:#fff;
}

In this way you can use tables without break the website semantic. Look at MDN for further details about display and table styling.

However, usually only one <h1> element per page is used to define the website’s page title, then all the other combinations of <h*> elements.

If you don’t need cross-browser compatibility (for example, if you’re developing some Chrome/Firefox extension/webapp), even the new flexbox could be an interesting alternative.

---

Another way could be to change vertical-align in your code with line-height set to the height of your <h1> element, but in this case you will have limited to a single line of text.