Html 将文本与DIV水平对齐

关于Stackoverflow，有几个问题是关于使用CSS（divs）水平对齐元素的。通常，这是使用浮动或

display:inline block

完成的

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

因此，基本上有三种方法：

方法1（使用

显示：内联块

）

方法3使用。。（请不要杀我）a

：

<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的问题是如果文本变长了会发生什么？嗯

因此，使用float的问题是，如果文本变长，DIV元素将被分解到下一行。所以这是不可接受的。请注意，方法1（

内联块

）没有此问题

唯一满足所有要求的方法是使用

的方法，但我不想使用它，因为。。。嗯

---

那么，这里的最佳解决方案是什么。我如何使用CSS中的DIV来获得与方法3相同的结果，方法3使用

？

添加

行高：1em；垂直对齐：顶部似乎可以解决这个问题（其中，行高是带边框div的高度）

一、 我自己更喜欢
inline block
而不是
float
，因为在早期版本的IE中
float
是不可预测的。它也很难防止
float
溢出到下一行，因为这是它的设计目的，真的
 增加
线高：1em；垂直对齐：顶部似乎可以解决这个问题（其中，行高是带边框div的高度）

一、 我自己更喜欢
inline block
而不是
float
，因为在早期版本的IE中
float
是不可预测的。它也很难防止
float
溢出到下一行，因为这是它的设计目的，真的
 没有跨距、缩进、边距或javascript？没有跨距、缩进、边距或javascript？
<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>

<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>