表格內的div：如何在div和表格中垂直對齊文本

-2

在這個例子中，兩個文本塊在左邊垂直對齊，但我找不到（經過大量研究和許多嘗試）如何對齊它們在兩邊：表格內的div：如何在div和表格中垂直對齊文本

<div style="text-align: justify; padding: 10px;">some wrapped (long enough) text 
    <table style="margin-left: -7px; width: 100%; border: 3px solid red"> 
     <tr><td>some wrapped (long enough) text</td></tr> 
    </table> 
</div>

這只是一個簡單的例子;該表實際上包含多個原始和列。垂直對齊涉及一方面在表格和另一方面在表格中的文字。

讓我重新說明一個問題：我可以調整div內的表格大小，使其相對於瀏覽器具有100％的相對容量div的邊距和填充值嗎？如果我可以添加像寬度：（100％+ 7px）;這將是很好的。

最後我想到了這個妥協/解決方法：薄邊框（1px），邊距和填充％，以及計算的寬度（太大）（> 100）。

來源

2013-06-22 user2511454

text-align：center;否則我不明白你的要求。 –

恐怕如果它被包裹在另一個div中，你不能使表格的寬度相對於瀏覽器屏幕。 –

這證實了我的想法 - 謝謝！ – user2511454

解決方案使用的是float:left和float:right。在你的情況下，使用2個div就足以實現你所需要的。檢查demo

<div style="text-align: justify; padding: 10px;"> 
    <div style="float:left">some wrapped (long enough) text</div> 
    <div style="float:right">some wrapped (long enough) text</div> 
</div>

如果您仍然想使用表格。也有可能，但我沒有看到這裏用表格的指點

<div style="text-align: justify; padding: 10px;"> 
     <div style="float:left">some wrapped (long enough) text</div> 
     <table style="float:right;margin-left: -7px; border: 3px solid red"> 
     <tr><td>some wrapped (long enough) text</td></tr> 
    </table> 
</div>

檢查demo

來源

2013-06-22 11:13:24

你可以使用FLOAT，不要使用表，像這樣：

<div style="text-align: justify; padding: 10px;"> 
    <div style="float:left">text text text text</div> 
    <div style="float:left">text text text text</div> 
</div>

或「float：right」爲第二個。

不要忘記做：

<div style="clear:both"></div>

到底

（如有必要）。不要使用表格，除非它是必需的（例如統計表）。

來源

2013-06-22 11:20:50 Hdev

表格內的div：如何在div和表格中垂直對齊文本

回答

相關問題