[转]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 样式的示例及其他问题的解决方法,欢迎查阅。©
本文发表于水景一页。永久链接:<http://cnzhx.net/blog/tablepress_faq-align-text-in-cell/>。转载请保留此信息及相应链接。
关注下了哈。
相互关注