1

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使用..（请不​​要杀了我）a <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 ( floats) 看起来不错，但是方法 2 的问题是如果文本更改为更长的内容会发生什么？好...

在此处输入图像描述

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

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


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

4

1 回答 1

1

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

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

于 2012-07-15T21:25:19.607 回答