uniapp系列-06简单的文字居中

最新推荐文章于 2024-03-17 21:38:11 发布
最新推荐文章于 2024-03-17 21:38:11 发布
阅读量623 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mylamb/article/details/133190284
版权

新建目录及vue文件

引入

index.vue中引入,记得保存

加样式

.card{
	padding:20rpx 0;
	display: flex;
	justify-content: center;
	font-weight: bold;
}
.card-name{
	padding:0 20rpx;
	font-size: 32rpx;
}

增加多个文本,运用传参

这里需要把文字的引号''删掉,不然会显示到界面上

index.vue中修改,传过去

然后在Card.vue中编写函数接收

加个插槽,把view组件放进slot组件里

最终删了引号''的结果如图:

mylamb194
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts中国地图--省份文字居中
08-30
ECharts中国地图--省份文字居中
china-各个省份文字居中
01-25
坐标调整后城市名称居中显示。可能会乱码，但是不影响功能使用
uniapp下页面布局分析三——元素垂直居中
lsjweiyi的博客
04-15 1万+
本文继续前面的内容，App.vue采用了flex布局 垂直居中还是有点难度的。 但是习惯使用flex布局后，又能简单的实现。 页面只有一个元素 <template> <view class="center"> <view style="background-color: blue">居中文字</view> </view> </template> <style> .center {
uniapp项目所遇问题总结
wwppp987的博客
11-28 1846
1.想让一个盒子内的text标签下的文字实现左下角对齐 目前的解决办法是设置padding，使文字下移，同时需要设置box-sizing: border-box; 2.设置字体小于12px（9px），使用transform: scale(0.75);，但是会留有空白，不能中间对齐 目前的解决办法是设置：transform: scale(0.75);transform-origin:0 0;使得文字原点为左上角，然后实现居中。 同时可以对应的放大盒子的width，来消除留白 3.设置一个盒子往上覆盖一部分上面
uniapp canvas文字和元素居中
最新发布
qq_43235503的博客
03-17 485
uniapp canvas文字和元素居中
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%; ...
uniapp如何点击高亮，文字相对于整个页面左右居中显示？
weixin_42711805的博客
10-24 1481
【代码】uniapp如何点击高亮，文字相对于整个页面左右居中显示？
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;" ...
UNIAPP中文字上下左右居中
weixin_44600235的博客
05-17 1万+
效果： vue: <view class="groud" v-for="(itemNew,indexNew) in newList" :key="indexNew"> <uni-row> <uni-col :span="3"> <view class...
uni-app 文字居中
laiyucannian的博客
08-25 1977
在文本所在的父元素上设置 display: flex;和 justify-content: center;即可实现水平垂直居中。
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
weixin_46001736的博客
09-27 3883
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
uniapp踩坑笔记
qq_39410252的博客
11-11 1383
1、Nvue的text标签中的内容怎么也不居中，可能是因为换行和空格也被显示出来了 2、H5页面有广告可能是因为，当前使用的网络被底层运营商劫持了，可以选择使用HTTPS或向运营商投诉得以解决 3、在pages.json中设置允许下拉刷新后，页面在无任何异常大情况下，不妨看一下是不是一个页面在pages.json中注册两回，第二个没有设置允许下拉刷新，将第二个删除了就好了。 ...
uniapp 页面元素水平垂直居中
mashangzhifu的博客
10-22 1万+
在uniapp中如何让一个源码在页面中水平垂直居中？在App.vue添加如下代码设置页面宽度100%显示。
Q-文字表格居中.lsp
05-25
Q-文字表格居中.lsp
line-height使文本居中的3像素bug问题
09-27
line-height使文本居中的3像素bug，先查下这3px的底细，怎么查？观察 FW先写个height、line-height都为30px，背景为红色的元素，设置文字为12px。然后量下，果然有3px的bug。同时增加或者减少height、line-height 1...
表单元素和文字垂直居中对齐问题解决整理
09-25
为了使表单元素和文字都垂直居中对齐，当文本框和下拉框都没问题，但是单选框和复选框就了，经过反复测试终于完整搞定与大家分享，感兴趣的各位可不要错过了哈
uni-app的canvas设置文字居中对齐center
weixin_47753939的博客
02-23 2443
重点：ctx.fillText()的第二个参数是你画布canvas的宽度，不然不能居中对齐！！！！！！！！！！！！ ctx.setTextAlign('center') ctx.fillText('文字', canvas总宽度px, y轴位置px)
uniapp button字体没有垂直居中
lsjweiyi的博客
04-16 5671
uniapp在某些场景下，它的button字体没有垂直居中： 应该看的出来，上面比下面宽不少。造成这个现象的原因是我给它的样式设置了height：80%。因为默认样式只提供了default和mini这两个选项，他们分别代表的字体大小是18px和13px。 因为我是不想按钮太挨着我的上下两条边，所以设置了高度。 解决办法1： 放弃设置高度，改为设置字体大小，也能改变按钮的高度。这个方法应该更符合规范。 解决办法2： 方法1可能大家都知道，这里主要想讲一下另一个方案，虽然在这里不一定适合： 造成这个现象其实是
uni-app开发微信小程序,如何让文字在垂直及水平居中和底部对齐
weixin_45395283的博客
09-21 1914
view class="main-content-phone-content-list flex-center">充值历史
你了解uniapp的uni-popup如何居中
06-09
对于 `uni-popup` 组件，要使其居中显示，可以通过以下方式实现： 1. 首先在 `uni-popup` 组件的样式中设置 `position:fixed`，这样可以让组件脱离文档流，方便进行定位。 2. 然后在 `uni-popup` 组件的样式中设置 `left: 50%` 和 `top: 50%`，将组件的左上角定位在页面的中心位置。 3. 接着设置 `transform: translate(-50%, -50%)`，将组件的中心位置与页面的中心位置对齐，这样组件就能够居中显示了。 完整的样式代码如下： ``` .uni-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 这样就可以让 `uni-popup` 组件居中显示了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值