Question

感谢您阅读本文。

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

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

Answer 1

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

当然：

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

：）

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

Answer 2

您可能想要使用的是数据的<table>结构。虽然有很多文件流传着说“桌子很糟糕;从不使用桌子”，但桌子显然是正确的结构，因为它们可以很容易地实现你正在寻找的视觉效果，并且（从我所知道的）你正在提供表格数据。

Answer 3

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

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

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

3 个答案: