CSS CSS垂直对齐标题中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7084100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Vertically Align Text in Header
提问by Drew
I am trying to vertically align text in my header, and am having some trouble. Attached is an image of my starting point:
我正在尝试垂直对齐标题中的文本，但遇到了一些麻烦。附上我的起点图片：
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.
标题的设置高度为 141 像素，该标题中的所有内容都应位于中间。甚至是“此处的网站名称”，因此如果该名称更改并且仅占用 1 行或 3 行，则它们都将位于同一个位置。
Note:this is for multiple websites, which are being generated dynamically so that's why I cannot just position it with a margin-topbecause the names will be different, some might take up a few lines and some might take up multiple lines.
注意：这是针对动态生成的多个网站，这就是为什么我不能只用 a 来定位它，margin-top因为名称会有所不同，有些可能占用几行，有些可能占用多行。
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:
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:
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!
谢谢！
采纳答案by NGLN
I think this is what you are looking for, see demo fiddle.
我认为这就是您要寻找的，请参阅演示小提琴。
The markup will become like:
标记将变成：
<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.
也许您可以再摆弄一些以消除一两个标签。
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.
在 IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0 的 Win7 上测试。我知道它也可以在 IE7 中工作，但它需要一些调整。待定
回答by Jonah Katz
Heres a great method. Create a div inside the header div and give it the following style :
这是一个很好的方法。在标题 div 内创建一个 div 并为其指定以下样式：
.innerdiv {height:1px; position:absolute; margin-top:50% }
And make sure the header div has
并确保标题 div 具有
position:relative;
And put all your content inside innerdiv
把你所有的内容放在innerdiv里
