CSS垂直对齐标题中的文本

Question

我正在尝试垂直对齐标题中的文字，但遇到了一些麻烦。附件是我的出发点的图像：

标题的设置高度为141px，标题中的所有内容都应该在中间。甚至“这里的网站名称”，所以如果该名称发生变化，只占用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;}

谢谢！

Answer 1

我认为这就是您要找的内容，请参阅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>

也许你可以通过一些方法来消除一两个标签。

在IE8，IE9，Opera 11.50，Safari 5.0.5，FF 5.0，Chrome 12.0的Win7上测试过。我知道it is also possible to work in IE7，但它需要一些调整。 T.b.c。

Answer 2

这是一个很棒的方法。在标题div中创建一个div，并为其指定以下样式：

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

确保标题div

position:relative;

并将所有内容放入innerdiv