當我們需要在HTML網頁上展示一張圖片時,我們通常會使用標簽來插入圖片。但是如果我們需要在HTML表格中顯示圖片,我們需要使用CSS樣式來使得數據居中顯示圖片。
table { border-collapse: collapse; } td { text-align: center; vertical-align: middle; } td img { display: block; margin: 0 auto; }
上述代碼中,我們對table設置了border-collapse屬性,使得單元格邊框合并,表現更加美觀。接著,我們對td單元格設置了水平居中和垂直居中屬性,使得圖片在單元格內居中展示。最后,我們對td中的img標簽設置了display:block和margin:0 auto屬性,讓圖片顯示為塊狀元素,并且同時水平居中。
使用上述CSS樣式之后,我們只需要在HTML中將圖片放置在表格單元格內,就可以使得圖片在單元格中居中顯示。
下一篇css改變字體之間空格