如何在两个并排的div中垂直居中显示文本？

Thanks for reading this.

感谢您阅读本文。

I have markup similar to what is below. Using the line-height works when there is only one line of text, but the comments data will frequently be multi-line. What is the best way to get the label and the data vertically centered?

我有类似于下面的标记。当只有一行文本时使用行高,但注释数据通常是多行的。获取标签和数据垂直居中的最佳方法是什么?

<html>
 <head>
 <style>
  body {margin:0; padding:0; font-size:12px; font-family:Verdana; text-align:center;}
  body {text-align: -moz-center; }  /* For Firefox */
  .record {width:760px; text-align:left; }
  .label {float:left; width:125px; line-height:75px;}
  .data {float:left; margin-left:10px; line-height:75px;}
  .clear {clear:left;}
 </style>
 </head>
 <body>
  <div class="record">
   <div class="label">Subject:</div>
   <div class="data">This is the subject</div>
   <span class="clear"></span>

   <div class="label">Status:</div>
   <div class="data">This is the status</div>
   <span class="clear"></span>

   <div class="label">Comments:</div>
   <div class="data">These are the comments</div>
   <span class="clear"></span>
  </div>
 </body>
</html>

3 个解决方案

#1

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

and of course:

而且当然:

http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=vertically+align+text+div&spell=1

Tables have their place; but it is good to try and figure how to do something in a div before resorting back to tables. That way when the time comes that you can't do something in a table you know instantly how to do that in a div. Besides - although they can be more complex then tables they allow for MUCH better flexibility in your design once you know how.

桌子有它们的位置;但是在尝试回到表之前尝试计算如何在div中做某事是很好的。这样,当你不能在表格中做某事时,你会立即知道如何在div中做到这一点。此外 - 尽管它们可能比表格更复杂,但只要您知道如何,它们就可以让您的设计具有更大的灵活性。

#2

Probably what you want to use is a <table> construction for your data. Although there's a lot of documents circulating around saying, "tables are bad; never use tables," tables are clearly the right construction here because they can easily achieve the visual effect you're looking for, and (from what I can tell) you are presenting tabular data.

您可能想要使用的是数据的

结构。虽然有很多文件流传着说“桌子很糟糕;从不使用桌子”,但桌子显然是正确的结构,因为它们可以很容易地实现你正在寻找的视觉效果,并且(从我所知道的)你正在呈现表格数据。

#3

I read the solutions that teach you how to do this with a DIV. When I faced a similar issue, I just used a table, using which looks less messy and pretty elegant to me.

我阅读了教你如何使用DIV做到这一点的解决方案。当我遇到类似的问题时,我只是使用了一张桌子,使用它对我来说看起来不那么混乱和优雅。

I don't think there's anything wrong in using a table in this particular situation at least.

我认为至少在这种特殊情况下使用表格没有任何问题。

#1