Q

我怎樣才能在兩個並排divs垂直居中文本？

html
css

2008-12-31 61 views 3 likes

3

感謝您閱讀本文。我怎樣才能在兩個並排divs垂直居中文本？

我有類似於下面的標記。當只有一行文本時使用行高工作，但評論數據通常是多行的。讓標籤和數據垂直居中的最佳方式是什麼？

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

2008-12-31 Jay Corbett

A

回答

2

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中做到這一點。除此之外 - 儘管它們可能更復雜，但是一旦你知道如何，它們可以讓你的設計具有更好的靈活性。

2008-12-31 02:41:37 nlaq

+0

第一個鏈接很棒，但該技術在IE7中無法使用，並且它提供的IE7解決方案不太好。我認爲在這種情況下，人們說「使用桌子」的合唱團是正確的。 – mhenry1384 2011-01-28 22:04:09

1

也許你想使用什麼是<table>建設爲您的數據。雖然有很多文件流傳說：「表格很糟糕，從不使用表格」，表格顯然是正確的結構，因爲它們可以輕鬆實現您要查找的視覺效果，並且（從我所知道的）正在呈現表格數據。

2008-12-31 01:10:48

+0

我同意。 Blah blah桌子很糟糕，你試圖讓兩個div並排坐在一起，並拆分屏幕房地產。這比製作桌子要困難得多。話雖如此，把表格放在一個div裏並不是一個壞主意，可以更容易在頁面上移動。 – jcollum 2008-12-31 01:13:12

0

我讀過解決方案，教你如何用DIV做到這一點。當我遇到類似的問題時，我只用了一張桌子，使用它看起來不那麼凌亂和優雅。

我不認爲在這種特殊情況下至少使用表格有什麼不妥。

2008-12-31 02:44:57

相關問題