table内的文字如何居中?CSS控制td文字垂直居中

2018年7月2日18:06:56HTML&CSStable内的文字如何居中?CSS控制td文字垂直居中已关闭评论3,446 views1

使用table时候发现文字并不居中,大家比较熟悉的CSS样式为text-align,但是在实际的应用中text-align:center只会横向左右居中,那么td中的文字垂直居中怎么办?可以使用vertical-align:middle;文章源自新手站长网-https://www.xinshouzhanzhang.com/vertical-align.html

table文字垂直居中

CSS让table中的文字垂直居中,使用vertical-align:middle;即可:
td{vertical-align:middle;}文章源自新手站长网-https://www.xinshouzhanzhang.com/vertical-align.html

在CSS中添加这个样式就可以垂直居中了,当然如果直接在td上加可以这样写:文章源自新手站长网-https://www.xinshouzhanzhang.com/vertical-align.html

<table>
  <tr>
    <td style="vertical-align:middle;text-align:center;">我是文字,我垂直居中</td>
  </tr>
</table>

上述实例中,文字不仅是左右居中,垂直方向也是居中的。文章源自新手站长网-https://www.xinshouzhanzhang.com/vertical-align.html