CSS垂直对齐标题中的文本答案

【问题标题】：CSS Vertically Align Text in HeaderCSS垂直对齐标题中的文本
【发布时间】：2011-10-28 09:15:18
【问题描述】：

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

标题的高度设置为 141 像素，并且该标题中的所有内容都应该在中间。即使是“此处的网站名称”，所以如果该名称发生变化并且只占用 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;}

谢谢！

【问题讨论】：

我们必须查看一些 HTML/CSS 才能获得最佳答案，而没有看到代码我会说宽度是错误的。
您要支持哪些浏览器？因为您可能可以使用display:inline-block 或display:table-cell 使其工作，但您可能会遇到一些IE6/7 问题。
更新了我的起始代码！
Do you need IE6 or 7 support?
我为 IE 7 做，我不在乎 IE 6。

标签： css text alignment

【解决方案1】：

这是一个很好的方法。在标题 div 中创建一个 div 并为其赋予以下样式：

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

并确保标题 div 有

position:relative;

把你所有的内容都放在innerdiv里面

【讨论】：

谢谢，我无法让它正常工作，但感谢您的尝试。

【解决方案2】：

我认为这就是您要寻找的，请参阅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，但它需要一些调整。结核病

【讨论】：

非常感谢！完美运行。
刚要解决那个 IE 7 问题，它现在真的把整个布局搞砸了。
如果您的文本多于或少于两行，这将不起作用。