使用DIV水平对齐文本

Question

Stackoverflow上有一些问题要求使用CSS（div）水平对齐元素。通常，这是使用浮点数或display: inline-block完成的。

但是，我有一个非常简单的要求，并且我很难使用这些技术中的任何一种来使其完美地工作。我只想将一行文本与DIV元素水平对齐。

所以，基本上，有3种方法可以做到这一点：

方法1（使用display: inline-block）

<div style = "display: inline-block;">Foo</div>
<div style = "display: inline-block; padding-left: 19px">
    <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div>
</div>

方法2（使用float）

<div style = "width: 150px">
    <div style = "float:left">Foo</div>
    <div style = "float:right">
        <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div>
    </div>
</div>

方法3 使用..（请不​​要杀了我）<table>：

<table style = "width: 150px" cellpadding = "0" cellspacing = "0" border = "0">
    <tr>
        <td style = "width: 40px">
            Foo
        </td>
        <td>
            <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div>
        </td>
    </tr>
</table>

这三种方法在Firefox上呈现如下：

好的，首先，方法1（inline-block）的问题是文本没有与DIV元素垂直对齐（居中），这看起来很尴尬。而是，DIV的底部边框与文本的底部对齐。我尝试调整填充和边距来解决这个问题，但它没有帮助。

方法2（float s）看起来不错，但方法2的问题是如果文本变为更长的时间会发生什么？嗯......

因此使用浮点数的问题在于，如果文本变长，则DIV元素会被击倒到下一行。所以这是不可接受的。请注意，方法1（inline-block）没有此问题。

满足所有要求的唯一方法是使用<table>的方法，但我不想使用它，因为......好吧，reasons。

那么，这里最好的解决方案是什么。我如何只使用带有CSS的DIV来获得与方法3相同的结果，方法3使用<table>？

Answer 1

将line-height:1em; vertical-align:top;添加到包含方法1的div的文本中似乎解决了这个问题（其中line-height是有界div的高度）。

由于早期版本的IE中inline-block的不可预测性，我自己更喜欢float到float。也很难阻止float溢出到下一行，因为这是它的设计目的，真的！