TablePress 常见问题:将单元格内文本居中显示

WordPress 表格插件 TablePress 提供了方便的自定义 CSS 功能来满足不同表格、不同场合的样式需求。有时候为了美观,我们希望将表格单元格内部的文字、图片等内容居中显示,而不是按照默认的那样左对齐,此时,可以通过其自定义 CSS 样式来很方便的实现。可以针对特定的某个表格,也可以应用于网站中的所有 TablePress 表格。

如果不清楚怎么使用 TablePress 中的自定义样式,可以参考指定 TablePress 表格某行/某列的背景色,那里有详细的操作说明。

针对特定的某个 TablePress 表格:将类似下面的自定义 CSS 样式放到 TablePress 自定义样式文本框:

.tablepress-id-N th, /* 用于标题栏 */
.tablepress-id-N td { /* 用于表格 ID 为 N 的所有表格中的所有单元格 */
   text-align: center; /* 水平居中 */
   vertical-align: middle; /* 垂直居中 */
}

这里 N 应该用要设定的表格的 ID 替换。其中,

  • .tablepress-id-N th, 那一行是为了将表格的标题行也居中显示。如果不需要就删除这一行。
  • vertical-align: middle; 是为了垂直居中,当表格单元格高度比较大的时候,文字到上、下边界的距离差不多。如果不需要可以删除这一行。

如果要对网站中所有用 TablePress 插入的表格应用此设定,可以用 .tablepress 替换上面样式规则中前面的 .tablepress-id-N

按照上面的设置,会将一个表格(或者网站中所有 TablePress 表格,看你用的是上面哪一种了)中的所有单元格内部内容都设置为居中显示。有的时候可能只需要对某一行,或者某一列,又或者某一个特定的单元格进行这样的设置,那么,就需要对上面的样式选择器进行更详细的限定。

以 .tablepress-id-N td 为例,如果希望对某一行(行序号假设为 X)里面的所有单元格应用前面的样式,则应该这一行改为,

.tablepress-id-N .row-X

如果要同时针对 X1 行和 X2 行都这样设置,则应该使用,

.tablepress-id-N .row-X1,
.tablepress-id-N .row-X2 {
/* ... 这里省略了 ... */
}

而如果针对列(比如列号 Y),则应该使用,

.tablepress-id-N .column-Y

但是要注意,交叉使用 .row 和 .column 则表示特定的单个单元格。比如,

.tablepress-id-N .row-X .column-Y

表示针对表格 ID 为 N 的 TablePress 表格里面的 X 行和 Y 列那个位置的单个单元格。

请参考 TablePress 文档:CSS 选择器与自定义样式指定 TablePress 表格某行/某列的背景色以及 TablePress 常见问题:如何高亮单元格等文来了解 CSS 样式选择器的使用方法。

如果需要关于 TablePress 的其它帮助,请访问 TablePress 中文页面获取更多信息。TablePress 常见问题页面还有更多自定义 CSS 样式的示例及其他问题的解决方法,欢迎查阅。©

本文发表于水景一页。永久链接:<https://cnzhx.net/blog/tablepress_faq-align-text-in-cell/>。转载请保留此信息及相应链接。

10 条关于 “TablePress 常见问题:将单元格内文本居中显示” 的评论

  1. 为什么设置了.tablepress-id-N th, /* 用于标题栏 */
    .tablepress-id-N td { /* 用于表格 ID 为 N 的所有表格中的所有单元格 */
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    }
    后,显示只是水平居中而不是水中垂直都居中啊,请帮忙解答,感谢!

    • 不好意思,还有个问题,这样设置后,单元格内如果是图片的话,任何居中效果都没有

      • 估计是因为你的单元格中的图片本身也设置了样式而覆盖了这个设置。与刚才的问题类似。
        如果你不知道怎么修改的话,请给个页面链接我帮你看看。

    • 应该是因为你的 CSS 中有更明确的定义导致该定义失效。可以将 { … } 前的内容改成下面的试试看,

      .tablepress-id-N thead th, 
      .tablepress-id-N tbody td
      • 这个方法成功了,真的十分感谢您!那个图片居中问题用插入图片那个功能也解决了,再次谢谢您的帮助!

  2. 非常非常感谢您的分享,我学会了很多。

    但是我想实现合并单元格之后的大格子里如何 垂直居中。

    谢谢!

    • 合并的单元格也还是 cell,可以用表格单元格样式

      vertical-align: middle;

      来使单元格内容垂直居中。

时间过去太久,评论已关闭。
如果您有话要说,请到讨论区留言并给出此文章链接。
谢谢您的理解 :-)