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

我拿出我试图从垂直对准我在网上搜索，因为没有什么工作，所以这是从我的出发点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上。我知道<一个href="http://stackoverflow.com/questions/6180034/problem-vertically-aligning-text-of-an-element-that-spans-two-lines/6245662#6245662">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.

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