CSS Vertically Align Text in Header

Question

I am trying to vertically align text in my header, and am having some trouble. Attached is an image of my starting point:

Preview

The header has a set height of 141px and everything in that header should be right in the middle. Even the "Name of Website Here", so if that name changes and only takes up 1 line, or maybe 3 lines it will all be in the same place.

Note: this is for multiple websites, which are being generated dynamically so that's why I cannot just position it with a margin-top because the names will be different, some might take up a few lines and some might take up multiple lines.

I took out my attempts to vertically align it from what I searched online because nothing is working so this is the code from my starting point.

HTML:

<div id="header">
    <h1>Name of Website Here</h1>
    <h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3>
    <p>123 Main St.<br />City, State, Zip</p>
</div>

CSS:

#header{height:141px;}
#header h1{float:left;font-size:1.7em;width:200px;text-align:center;line-height:26px}
#header h3{float:left;text-align:center;color:#e62520;font-size:1.7em;line-height:26px;font-style:italic;margin:0 0 0 95px}
#header h3 span{font-size:1.2em;}
#header p{float:right;color:#2a5091;font-size:1.3em;font-style:italic;font-weight:bold;line-height:20px;text-align:right;}

Thank you!

Were going to have to see some HTML/CSS to get the best answer, without seeing code I would say the width is wrong. — Howdy_McGee, Aug 16 '11 at 19:51
What browsers are you trying to support? Because you could probably use `display:inline-block` or `display:table-cell` to make it work, but you'd likely have some IE6/7 issues. — sdleihssirhc, Aug 16 '11 at 19:53
[Do you need IE6 or 7 support?](http://gs.statcounter.com/#browser_version-ww-monthly-201007-201107) — thirtydot, Aug 16 '11 at 20:00
It's not the real design it is just the framework with basic CSS styles for now. Thank you for your concern though. — Drew, Aug 16 '11 at 20:24

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

I think this is what you are looking for, see demo fiddle.

The markup will become like:

<div id="header">
    <span><h1>Name of Website Here</h1></span>
    <span><h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3></span>
    <div><span><p>123 Main St.<br />City, State, Zip</p></span></div>
</div>

Maybe you can fiddle around some more to eliminate one or two tags.

Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. I know it is also possible to work in IE7, but it needs some tuning. T.b.c.

edited May 23 '17 at 11:46

Community

1
1

answered Aug 16 '11 at 21:23

NGLN

43,011
8
105
200

Just gotta work on that IE 7 issue, it really messes up the whole layout now. – Drew Aug 16 '11 at 21:53
this doesn't work if you have more or less than two lines of text. – Mir Oct 13 '15 at 18:01

score 0 · Answer 2 · answered Aug 16 '11 at 20:23

0

Heres a great method. Create a div inside the header div and give it the following style :

.innerdiv {height:1px; position:absolute; margin-top:50% }

And make sure the header div has

position:relative;

And put all your content inside innerdiv

answered Aug 16 '11 at 20:23

Jonah Katz

5,230
16
67
90

Thanks, I couldn't quite get that to work but I appreciate you trying. – Drew Aug 16 '11 at 21:44

CSS Vertically Align Text in Header

2 Answers2

Linked