将文本与DIV水平对齐

在Stackoverflow上有几个问题需要关于使用CSS（div）水平对齐元素。一般来说，这是通过使用浮动块或display: inline-block完成的。将文本与DIV水平对齐

但是，我有一个非常简单的要求，并且我很难使用这些技术中的任何一种来使其完美工作。我只是想将一行文本与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 方法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：

enter image description here

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

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

enter image description here

所以使用花车的问题是，如果文本变长，DIV元素被撞倒到下一行。所以这是不可接受的。请注意方法1（inline-block）没有此问题。

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

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

来源

2012-07-15 Channel72

没有跨度，缩进，边距，也没有javascript？ – 2012-07-15 21:20:02

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

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

来源

2012-07-15 21:25:19 jaypeagi

将文本与DIV水平对齐

回答

相关问题