在編寫網頁的過程中,表格一般是難免要使用的,而表格中添加圖片也是很常見的操作。但是,如果想要將表格中的圖片設置為居中顯示,該怎么辦呢?下面,我們就來介紹一下使用CSS來實現表格內容設置居中顯示圖片的方法。
<table> <tr> <td></td> </tr> </table>
首先,在HTML中插入一張圖片,放在表格的某個單元格中。
td { text-align: center; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ }
然后,在CSS中給這個單元格添加樣式,實現圖片水平和垂直居中顯示。其中,text-align: center
表示水平居中,vertical-align: middle
表示垂直居中。
接下來,我們可以對圖片進行一些其他樣式的設置,比如設置圖片大小:
td img { width: 100px; height: 100px; }
這樣,我們就可以將表格中的圖片設置為居中顯示,并且設置了其大小。
下一篇css表格去除下邊框