對齊表格標題單元格中的多行文本和圖像

快速問題我正在努力，希望我剛剛得到了一個大腦阻塞，我錯過了一些簡單的東西。對齊表格標題單元格中的多行文本和圖像

我們有一堆表頭，其中一些表頭有排列向上/向下的箭頭。我們希望文本左對齊，圖像在表格標題單元格中右對齊。我有一個跨度容器內的2個箭頭圖像（但這可能是一個div）與nowrap應用它，以確保它們總是並排顯示（這也是一個要求）。複雜性是我們的一些表頭文本需要分成兩行 - 目前在文本中使用br。當我使用float：從右到右對齊圖像時，它們與多行文本的頂部垂直對齊，而不是與單元格的中間對齊。我做錯了什麼（可能會遲到）還是我需要徹底重新思考我的策略？

Thx MH

來源

2011-10-20 Mad Halfling

這非常喜歡它似乎無法做到 - 我們可以親近的，但每個解決方案把一切休息一起工作別的東西。感謝您的建議

來源

2012-02-17 12:35:05

嘗試圖像上的垂直對齊：中間。

來源

2011-10-20 20:52:28 lampej

這是我嘗試的第一件事，但它似乎並沒有工作 - 你有這個工作的例子嗎？ –

如果上面的回答對你沒有幫助，你可以發佈你的代碼嗎？ – lampej

將div與float：使用div作爲標題文本，float：使用右邊的圖像。垂直對齊：頂部標題。對於討厭的着色感到抱歉。我不是設計師。

你可以在jsfiddle擺弄它。

測試表：

<table> 
    <tr> 
     <th> 
      <div class="title">a header with a </br>br thing </div> 
      <div class="updown">up down</div></th> 
     <th> 
      <div class="title">a header</div> 
      <div class="updown">up down</div> 
     </th> 
     <th> 
      <div class="title">more headers</div> 
      <div class="updown">up down</div> 
     </th> 
    </tr> 
</table>

風格：

th, td { border: 1px solid green; } 
th { width: 200px; vertical-align: top; } 

.title { float: left; border: solid 1px purple; overflow: hide; } 
.updown { border: solid 1px red; float: right; }

來源

2011-10-20 21:13:03 Asken

謝謝，這差不多都是在那裏（和我的差不多），但它不適用於vertical-align：middle，我認爲他們會對箭頭垂直居中會產生挑剔 - 對此有何看法？ –

快速回答，你可以隨時去表頭內的表格。獲得垂直對齊：中間是一個更難的裂縫。我會再看看它。 – Asken

謝謝，我正在考慮不得不訴諸這樣的事情，但如果你能想出更好的東西，我會很感激。我會繼續尋找和p - - 在屁股要求血淋淋的痛苦....但不幸的是，它看起來不太好頂部對齊 –

對齊表格標題單元格中的多行文本和圖像

回答

相關問題