垂直和水平居中對齊HTML正文內容

我有一個JSFIDDLE創建位置，我粘貼了從另一個堆棧交換線程在線拾取的代碼，以顯示如何使用滾動來響應表格。我在測試方法時修改了代碼，它在我的機器上運行良好。我遇到的唯一問題是整個桌子是頂部對齊的。我只是無法弄清楚需要改變什麼屬性，以便讓整個桌子既水平又中心對齊。如果任何大師有任何建議將是偉大的！垂直和水平居中對齊HTML正文內容

的的jsfiddle是here

background-size: 50px 50px; 
background-color: #fff; 
background-size: 50px 50px; 
vertical-align: middle;

我嘗試添加垂直對齊：中間

似乎不起作用

而且實際的圖像是底部的TD內對齊。是否有可能讓他們居中對齊。

謝謝

謝謝！

來源

2016-03-09 Rian

嘗試Flexbox的：http://stackoverflow.com/a/33049198/3597276 –

在受支持的瀏覽器（大多數）中，您可以將top：50％/ left：50％與translateX（-50％）translateY（-50％）組合使用以動態垂直/水平居中元素。

.container { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);}

http://jsfiddle.net/47x60k4w/show/

來源

2016-03-09 05:13:48

感謝Jayanit。！這工作。該問題的另一部分與實際的圖像沒有關聯。雖然圖像被破壞，但邊界是可見的。你會注意到第一個圖像是底部對齊的。我嘗試了TD的valign =「Middle」，但那沒有奏效。 – Rian

垂直和水平居中對齊HTML正文內容

回答

相關問題