垂直对齐浮动div [英] Vertically align floating divs

问题描述

我试图浮动不同字体大小的两个div。我找不到一个方法来对齐在同一基线上的文本。这是我一直在努力：

I am trying to float two divs with different font-sizes. I can't find a way to align the text on the same baseline. Here is what I have been trying:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

推荐答案

您可以使用相对+绝对定位来获得垂直对齐到底部this：

Ok, firstly the pure CSS way. You can get vertical alignment to the bottom using relative+absolute positioning like this:

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

您可能会遇到一些问题，例如IE6行为以及z-index问题菜单（最后一次我尝试这个菜单出现绝对内容下）。

You may have some issues with this, like IE6 behaviour as well as z-index issues with things like menus (last time I tried this my menus appeared under the absolute content).

此外，根据所有的元素是否需要绝对定位与否，您可能需要开始做明确指定包含元素的高度，这通常是不受欢迎的。理想情况下，您希望容器为其子项自动调整大小。

Also, depending on whether all the elements need to be absolutely positioned or not, you may need to start doing things like specifying the height of the containing element explicitly, which is usually undesirable. Ideally, you'd want the container to auto-size for its children.

问题是不同大小的字体的基线不匹配，不知道这是一个纯粹的CSS方式。

The problem is that the baselines of the different-sized fonts will not match up and I don't know of a "pure" CSS way of doing this.

对于表，但是解决方案是非常简单的：

With tables however the solution is trivial:

<table id="header">
<tr>
  <td id="left">BIG</td>
  <td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>

尝试一下，你会发现它完美。

Try it and you'll see it works perfectly.

反表人群会尖叫蓝色谋杀，但上述是最简单，最兼容浏览器的方式（特别是如果需要IE6支持）。

The anti-table crowd will scream blue murder but the above is the simplest, most browser-compatible way (particularly if IE6 support is required) of doing this.

哦，总是喜欢使用类来嵌入CSS样式。

Oh and always prefer using classes to inline CSS styles.

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