目標

一個圖片img和一個表格table，并且圖片與表格共享一行。

實現

1. 在HTML中加上一個圖片和表格

代碼中寫兩個元素：圖片與表格，為了觀察方便給他們加上個紅色邊框。

代碼如下：

進擊的DOCTYPE

table,img {

border: 1px solid red;

}

單元格	單元格	單元格	單元格	單元格
單元格	單元格	單元格	單元格	單元格
單元格	單元格	單元格	單元格	單元格

在Chrome顯示結果如下：

1.png

2. 把圖片和表格放到一行中

因為table是個塊元素是獨占一行的，所以，把table的CSSdisplay屬性改為inline-block就好了，代碼如下：

table {

display : inline-block;

}

效果變成如下：

2.png

雖然結果有些奇怪，但是還是在一行了。

3. 讓圖片與表格垂直居中

給圖片加上vertical-align : middle屬性，圖片和表格垂直對齊居中了。

img {

vertical-align : middle;

}

效果見下圖：

3.png

拓展

垂直居中是常用對齊方式，這里使用了vertical-align屬性。不只是表格，只要是display為inline-block的標簽就可以，vertical-align當中有許多的屬性，用于其他各種場景。童鞋可先行嘗試，請靜待下回分解。

總結

以上是生活随笔為你收集整理的三个表格居中纵向html,前端技巧集：图与表三步垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。