由网友(人心皆薄凉@)分享简介：我想垂直于我的头对齐文本，和我遇到了一些麻烦。附件是我的出发点的图像：I am trying to vertically align text in my header, and am having some trouble. Attached is an image of my starting point:头部...

我想垂直于我的头对齐文本，和我遇到了一些麻烦。附件是我的出发点的图像：

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

头部有141px设定高度，一切都在这头应该是正中间。即使是网站名称这里的，因此，如果该名称的改变，只需要1行，或者3线它都将在同一个地方。

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.

注意：这是对多个网站，目前正在动态生成的所以这就是为什么我不能只用的margin-top ，因为它定位该名称将是不同的，有些人可能会占用几行，有些可能占用多行。

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.

我拿出我试图从垂直对准我在网上搜索，因为没有什么工作，所以这是从我的出发点code。

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

感谢您！

推荐答案

我想这是你在找什么，看到的演示小提琴。

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

的标记将成为这样的：

<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.

在IE8，IE9，歌剧11.50，Safari浏览器5.0.5，FF 5.0，Chrome浏览器12.0测试Win7上。我知道it也可以在IE7 的工作，但它需要一些调整。 T.b.c。

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.