技术知识分享

WordPress DUX主题设置表格自动居中

搬瓦工优惠码

小白换了WordPress后发现表格不能居中了。原版DUX主题的CSS里居然没有写表格居中的CSS。小白就趁机做个伪程序员,教大家一下怎么修改DUX主题的表格居中。本方法适用于所有WordPress主题。

教程:

  • 用Chrome在文章页表格处,右键检查。最右侧可以看到DUX主题的表格是用.article-content table这个属性。位置在/wp-content/themes/dux/css/main.css

  • 打开main.css,搜索.article-content table。可以看到如下代码:

    .article-content table{border-top:solid 1px #ddd;border-left:solid 1px #ddd;width:100%;margin-bottom:20px}
    .article-content table th{background-color:#f9f9f9;text-align:center}
    .article-content table td,.article-content table th{border-bottom:solid 1px #ddd;border-right:solid 1px #ddd;padding:5px 10px}
  • 查看代码得知th,也就是顶部是自动居中的,底部的表格都不居中,那我们添加;text-align:centertd尾部}前即可。

备注:

  • 以上教程完全适用于DUX,其他主题按方法找到css跟项目。改一下也可以让表格居中。
  • 表格可以用typora生成,查看地址:https://pc6a.com/1378.html 。生成方法就是先用Excel做好表格复制到typora,然后在编辑-复制html代码,拷贝到wordpress输入框中即可。
未经允许不得转载:pc6a学习分享 » WordPress DUX主题设置表格自动居中
阿里云轻量应用服务器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址