CSS垂直对齐页眉中的文本 [英] CSS Vertically Align Text in Header

问题描述

我试图在我的标题中垂直对齐文本，我有一些麻烦。附件是我的起点图片：

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.

我取出了我的尝试垂直对齐它从我在线搜索，因为没有什么工作，所以这是从我的起点的代码。

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!

推荐答案

我认为这是你正在寻找的东西，见 demo fiddle 。

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.

在Win8上在IE8，IE9，Opera 11.50，Safari 5.0.5，FF 5.0，Chrome 12.0中测试。我知道也可以在IE7中工作，但它需要一些调整。

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.

这篇关于CSS垂直对齐页眉中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！