Bootstrap 表格内容水平、垂直居中

Bootstrap 表格内容水平、垂直居中水平居中为 tdth 设置 text align center 即可需要注意的是 th 默认为内容居左 td 则没有 所以直接在 th 的父标签 tr 上添加 class text center 是无效的这是无效的 trclass text center th thth 商品信息 thth

水平居中

td th 设置text-align: center即可

这里写图片描述

需要注意的是:th 默认的样式为内容居左,td 则没有,所以直接在 th 的父标签 tr上添加 class="text-center"是无效的

这是无效的

<tr class="text-center"> <th ># 
   th> <th>商品信息 
   th> <th>金额 
   th> <th>订单状态 
   th> <th>操作 
   th>  
   tr>

td 则可以

 "text-center"> 1 ... 

垂直居中

这里写图片描述

订单时间、金额等 内容都是靠上方的,原因就是 Bootstrap 默认的设置就是vertical-align: top

这里写图片描述

所以覆盖这个样式就可以了

.table tbody tr td{ vertical-align: middle; }

注意样式的选择,下面的样式就不能覆盖,这里涉及优先级的问题,.table tbody tr td 的权值更大

 tbody tr td{ vertical-align: middle; }

这里写图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/229641.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午4:14
下一篇 2026年3月16日 下午4:14


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号