在页眉中垂直对齐文本的CSS方法

Question

我正在尝试垂直对齐标题中的文本，但遇到了一些问题。以下是我的起点图片：

标题的高度为141px，标题中的所有内容都应该居中。即使是"Name of Website Here"，如果名称更改并且只占据1行或者3行，它仍将位于同一位置。

注意：这适用于多个网站，这些网站是动态生成的，因此无法使用margin-top来定位，因为名称将不同，有些可能占用几行，而有些可能占用多行。

---

出于搜索在线解决方案的目的，我删除了垂直对齐文本的尝试代码，因为没有任何效果。以下是我的起点代码：

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

谢谢！

- Drew

---

我们需要看一些HTML/CSS代码才能得出最好的答案，没有看到代码，我会说宽度是错误的。 - Howdy_McGee

你想要支持哪些浏览器？因为你可能可以使用 display:inline-block 或 display:table-cell 来使其工作，但你可能会遇到一些 IE6/7 的问题。 - sdleihssirhc

你需要支持IE6或7吗？（http://gs.statcounter.com/#browser_version-ww-monthly-201007-201107） - thirtydot

我只为IE 7做，不关心IE 6。 - Drew

这不是真正的设计，现在只是一个带有基本CSS样式的框架。谢谢你的关心。 - Drew

Answer 1

我认为这就是你要找的东西，参见演示程序。

标记将变成这个样子：

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

也许你可以再试着去除一个或两个标签。

在Win7上测试过，支持IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0。我知道它也可能在IE7中工作, 但需要进行一些调整。待续。

- NGLN

---

得解决那个IE 7的问题，它现在真的搞乱了整个布局。 - Drew

如果您的文本行数不是两行，则此方法无法正常工作。 - Mir

Answer 2

这里有一个很棒的方法。在头部 div 内创建一个 div，并给它以下样式：

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

确保头部 div 已经存在

position:relative;

将所有内容放在innerdiv中

- Jonah Katz

---

谢谢，我没能让它正常工作，但我很感激你的尝试。 - Drew