CSS表格是web開發中常用的一種布局方式,可以讓表格的樣式更加美觀,同時也更加靈活。在表格中添加圖片時,經常遇到一個問題:如何垂直居中圖片。
這時候我們可以利用CSS中的垂直對齊屬性vertical-align
來實現。下面是實現垂直居中的CSS代碼。
td { vertical-align: middle; } td img{ display:block; margin:auto; }
首先通過設置表格單元格(td)的vertical-align
屬性為middle
來使文本和圖片垂直居中。但是這樣仍然不能將圖片完全居中,還需要再進行一些設置。
其次,我們需要將圖片置為塊級元素,并且使用margin: auto
屬性來進行居中,如上述CSS代碼所示。
通過這樣的設置,不僅表格單元格內的文本和圖片可以垂直居中,而且圖片也可以在本身所在的單元格內水平居中,整個表格的美觀度大大提高。
下一篇css表示id選擇器