使用CSS，垂直对齐短标题和描述的最优雅的方法是什么，而不是使用表格
不使用表格和
必须在 IE 7 和 Firefox、Chrome、Safari 中工作
垂直对齐的最简单方法：
A Title (20px)
With a variable length description (12px), can be 1 line or 2 (when wrapped)
在宽度为 500px、高度为 60px 的 div 内，可能是使用一张桌子。 不使用表格，最优雅的方法是什么？
请不要简单地给出“固定”高度解决方案的链接作为答案，因为它可以具有可变的高度。
更新：示例和可编辑测试：http://jsfiddle.net/mn2CH/3/
Not using table and
must work in IE 7 and Firefox, Chrome, Safari
The easiest way to vertically align this:
A Title (20px)
With a variable length description (12px), can be 1 line or 2 (when wrapped)
inside a div that has a width 500px, and height 60px, is probably by using a table. Without using a table, what is the most elegant way to do it?
Please do not simply give a link to a "fixed" height solution as the answer, as this can have variable height.
Update: sample and editable test: http://jsfiddle.net/mn2CH/3/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看看这个：
使用 CSS 垂直居中
方法 2 (使用负边距）是“经典”方法，我已经使用过几次。
Take a look to this:
Vertical centering with CSS
The Method 2 (using negative margins) is the "classic" approach, I have used it a couple of times.
我见过的支持旧版本 IE 的最干净的方法是 此方法< /a>.基本上，对于 IE，它使用了一种巧妙的方法，让主容器（在您的情况下为 500px x 60px），然后是两个内部容器 - 一个相对于
top: 50%定位，而其他相对定位为top：-50%。直观地说，一个容器位于主容器的一半位置，然后另一个容器向上移动其自身高度的一半。当然，对于较新的浏览器，您可以在任意元素上使用较新的
display属性，上面的文章也对此进行了解释。The cleanest approach I've seen that supports older versions of IE is this method. Basically, for IE, it uses a clever method of having your main container, in your case it would be 500px by 60px, and then two inner containers - one is positioned relatively with
top: 50%and the other being relatively positioned withtop: -50%. Intuitively, one container is positioned half way down the main container, and then the other container is moved up by half it's own height.And of course, for newer browsers, you can use the newer
displayattributes on arbitrary elements, which the above article also explains.