CSS Table 文本居中
显示图片
在网页制作中,表格常常被用来排列
页面中的
内容。而在表格中,我们也经常需要加入
图片作为
内容的一部分。本文将介绍如何使用 CSS 让表格中的
图片实现垂直与水平居中。
HTML
代码:
```
```
在这个基本
代码上,我们需要使用 CSS 来控制表格和
图片的样式。首先,我们需要设置表格宽度为100%以确保它在任何尺寸的屏幕上都能完全
显示。
CSS
代码:
```
table {
width: 100%;
}
```
接下来,我们需要设置表格中的单元格为水平居中,可以使用 text-align
属性来实现。
CSS
代码:
```
td {
text-align: center;
}
```
但是仅有水平居中还不够,
图片往往会比文本高度更小,导致在表格中会有一定的空白间隙,这时可以使用 vertical-align
属性来进行垂直居中的调整。
CSS
代码:
```
td {
text-align: center;
vertical-align: middle;
}
```
现在,表格中的
图片已经实现了水平和垂直居中,
代码如下:
```
```
总结:
本文介绍了如何使用 CSS 让表格中的
图片实现垂直与水平居中。设置表格宽度为100%,使用 text-align
属性实现水平居中,使用 vertical-align
属性实现垂直居中。