用css將一個按鈕對齊到一個表格

我試圖讓這些按鈕與我的桌子一樣，但它不能很好地工作，它們只是坐在底部。爲了簡單起見，樣式是內聯的，表格是靜態的（實際上這個表格正在動態地填充圖像）。用css將一個按鈕對齊到一個表格

<button id="lftArrow">&laquo;</button> 
<table style="display:inline-table;border:0px;height:120px;"> 
    <tr id="pictureSetDisplay" name="pictureSetDisplay"> 
    <td>some picture</td> 
    <td>some picture</td> 
    </tr> 
</table> 
<button id="rgtArrow">&raquo;</button>

任何想法，我應該使用的按鈕是什麼類型的風格，讓他們坐在桌子的中間垂直？

來源

2011-12-26 Travis J

在這個小提琴中，按鈕中間對齊，這不是你期待的結果嗎？ http://jsfiddle.net/hBZDT/ – 2011-12-26 16:29:43

我的意思是垂直，因爲他們坐在桌子高度的中間（桌子高度/ 2）。在小提琴中他們不是。 – 2011-12-26 16:34:37

我剛剛用Google Chrome瀏覽了一下小提琴，其實按鈕都坐在了谷底。在Firefox中，他們處於中間位置。請參閱我的答案只有CSS的方式。 – 2011-12-26 17:08:48

您可以將按鈕以及裏面的一張桌子 - 外部表。但是，是的，這將涉及更多的表格。

檢查小提琴：http://jsfiddle.net/FYV3m/3/

<table border="1"><tr> 
    <td valign="middle"> 
    <button id="lftArrow" style="height:120px">&laquo;</button> 
    </td><td valign="middle"> 
    <table style="display:inline-table;border:0px;height:120px;"> 
     <tr id="pictureSetDisplay" name="pictureSetDisplay"> 
     <td>some picture</td> 
     <td>some picture</td> 
     </tr> 
    </table> 
    </td><td valign="middle"> 
    <button id="rgtArrow" style="height: 120px">&raquo;</button> 
    </td> 
</tr></table>

您可以刪除從按鈕（或CSS）的高度風格需要。

來源

2011-12-26 16:39:24 techfoobar

我不介意使用另一個表格，雖然問題的目的是要看看這是否在CSS中是合理的。然而，我真的喜歡更大的按鈕的外觀+1，*接受* – 2011-12-26 16:43:00

您也許能利潤率做到這一點：自動

http://bluerobot.com/web/css/center1.html

來源

2011-12-26 16:25:45

對不起，但那是水平對齊，我說的是垂直對齊，並且

設置vertical-align: middle上表本身，像在這裏顯示：http://jsfiddle.net/hBZDT/1/

<button id="lftArrow">&laquo;</button> 
<table style="vertical-align: middle; display:inline-table;border:solid 1px;height:120px;"> 
    <tr id="pictureSetDisplay" name="pictureSetDisplay"> 
    <td>some picture</td> 
    <td>some picture</td> 
    <td>some picture</td> 
    <td>some picture</td> 
    </tr> 
</table> 
<button id="rgtArrow">&raquo;</button>

雖然有可能，請避免使用HTML表格，在您的網站佈局元素。

來源

2011-12-26 17:11:19

謝謝湯姆，這是一個很好的解決方案，並回答我的原始問題 - 我已經接受了另一個答案。我非常感謝你的css的簡潔，但是由於其他原因需要添加額外的表格。在我看來，表格通常是實現佈局設計結構的最佳方式，並且使用非常廣泛。如果您想表達這一點，請嘗試打開這一點作爲討論。 – 2011-12-26 17:48:51

用css將一個按鈕對齊到一個表格

回答

相關問題