踩坑记录uniapp的uni-td align：center 在app端只有水平居中没有垂直居中，web端正常

于 2024-08-24 16:19:01 发布
阅读量132 收藏
点赞数 3
分类专栏： 开发遇到的问题 文章标签： 前端 uni-app html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61616359/article/details/141501123
版权

在app端不居中的解决方法，找到相应类名修改样式：

::v-deep .uni-table-td { 
	    height: auto !important;
	     vertical-align: middle !important;
	}

夏目csc
关注
专栏目录
uni-table 改造源码 添加固定表头功能 附件修改后源码
weixin_45391874的博客
07-11 3227
demo
「uni-app 组件」 t-table 表格
weixin_33787529的博客
05-18 5708
table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。 此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台） github 地址： https://github.com/mehaotian/t-table 插件市场地址：http://ext.dcloud.net.cn/plugin?id=413 功能亮点 自定义全局表格样式 ...
图片水平垂直居中
01-24
图片水平垂直居中 用很精简的代码，实现图片水平垂直居中 效果
uniapp button字体没有垂直居中
lsjweiyi的博客
04-16 6219
uniapp在某些场景下，它的button字体没有垂直居中： 应该看的出来，上面比下面宽不少。造成这个现象的原因是我给它的样式设置了height：80%。因为默认样式只提供了default和mini这两个选项，他们分别代表的字体大小是18px和13px。 因为我是不想按钮太挨着我的上下两条边，所以设置了高度。 解决办法1： 放弃设置高度，改为设置字体大小，也能改变按钮的高度。这个方法应该更符合规范。 解决办法2： 方法1可能大家都知道，这里主要想讲一下另一个方案，虽然在这里不一定适合： 造成这个现象其实是
uniapp 图片水平垂直居中
最新发布
2301_78029091的博客
07-18 673
uniapp 图片水平垂直居中
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
weixin_46001736的博客
09-27 5295
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
uniapp中图片不居中问题
imkaifan的博客
04-25 9641
uni-image { display: inline-block; } 可见是行内块 可以转换为 display:block 然后margin： 0 auto；
uniapp image标签图片不会居中显示
xjh01的博客
09-05 6641
用image标签时，图片是自动靠左，如果图片不足够大的话，右边就会有空白。 系统默认的是 uni-image { display: inline-block; } 可见是行内块 这个时候在自己的页面下，配置css 可以转换为 display:block 然后margin： 0 auto； 这样就能实现居中了 ...
uniapp 表格的介绍和使用
11-17
uniapp表格组件是一个用于展示数据的布局工具，它由四个基本组件构成：uni-table（表格组件）、uni-tr（表格行）、uni-th（表格头）和uni-td（单元格）。这些组件协同工作，帮助开发者创建具有清晰结构的数据展示。 ...
【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）
y_coder的博客
06-14 1613
组件时，如果要将长方形图片显示为中间的正方形部分，可以使用 CSS 来实现裁剪效果。，让图片宽度等于盒子的宽度高度自适应。再将图片父盒子设置宽高以及使用。的话，超出高度的图片也有可能挤压别的盒子，导致其他元素错位。使得图片水平垂直居中。在使用 uni-app 框架的。来达到超出部分不显示的目的。
uniapp-table中改版uni-table插件
07-03
改版uni-table插件功能，新增单击行事件、单击某td事件、单独修改某td的字体颜色；选中行样式修改。主要修改文件uni-tr、uni-td;
uni-table 中uni-td没有提供单元格点击事件的解决方法
m0_62054189的博客
07-29 3225
uniapp uni-table
封装uniapp-uni-table组件，获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
lanbaiyans的博客
05-23 6415
封装uniapp-uni-table组件，点击行事件，传入表头，传入数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
uni-app封装表格组件
weixin_44326167的博客
12-25 1829
【代码】uni-app封装表格组件。
uniapp 页面元素水平垂直居中
mashangzhifu的博客
10-22 1万+
在uniapp中如何让一个源码在页面中水平垂直居中？在App.vue添加如下代码设置页面宽度100%显示。
uniapp 之 uni-table组件添加行点击事件
web13639198675的博客
02-23 4432
uniapp 之 uni-table组件添加行点击事件 第一种方案（不改变导入的 tr 组件） 第二种方案（改变 tr 组件） 写在末尾 由于 uniapp官网的uni-table组件 并没有给出添加行点击事件的events，于是自己想方法基于uni-table组件实现了表格行点击事件； 第一种方案（不改变导入的 tr 组件） <uni-table border stripe emptyText="暂无更多数据" :loading="loading"> <!-- 表头行
uniapp中flex设置居中
weixin_37166398的博客
04-12 1万+
.horViewStyle { display: flex; flex-direction: row; width: 100%; height: 80rpx; align-items: center;//垂直居中 background-color: #4399FC; } .textHorStyle { display: flex; height: 60%; ...
uni-app学习：CSS之flex布局居中
热门推荐
sziitjin的博客
07-15 1万+
1、上下居中（垂直居中） style="height: 40px; background-color: #FFFFFF; display: flex; flex-direction: row; align-items: center;" 2、左右居中（水平居中） style="height: 40px; background-color: #FFFFFF; display: flex; flex-direction: row; justify-content: center;" ...
优化代码<uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime>timenow && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">{{ item.room }}号诊室</uni-td> <uni-td align="center">已叫号</uni-td> </uni-tr> <uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime==null && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">等待中</uni-td> </uni-tr> <uni-tr v-for="item in smallNull" :key="item"> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> </uni-tr>
06-06
<uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center" v-if="item.calltime > timenow">小部位-激光脱毛</uni-td> <uni-td align="center" v-else>---</uni-td> <uni-td ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值