微信小程序——flex布局里的text汉字格式设置
2018-07-21 11:28
405 查看
flex布局里的text汉字格式
代码放在最后。官方给的代码给的点此,我下面结果就是在此基础之上改的。
我们在微信开发者工具里,编辑显示的情况常常出现如下情况:
改后→
<text>标签在flex布局中不能居中,尤其是数字:
如果<text>是纯文本,显示就不会是这样的:
数字与文本混合的显示呢?看下图:
我也调试了很多情况,个人觉得配合字体大小设计flex尺寸,来避难出现这种情况比较稳妥。
然后是文本的居中显示,如下图:
文本设置style居中未能显示,然后一个view标签:
text-align:center
text-align 属性规定元素中的文本的水平对齐方式
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
另外还有其他的属性,请查看字体设置(向后面翻一下)。
更改后的显示如下图:
下面附代码:
.wxml
[code]<view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item bc_green" style='text-align:center'>1</view> <view class="flex-item bc_red" style='text-align:center'>222</view> <view class="flex-item bc_blue" style='text-align:center'>3</view> </view> </view> <view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp" style="height: 300px;flex-direction:column;"> <view class="flex-item bc_green" style='text-align:center'>纯数字111</view> <view class="flex-item bc_red"> <view style='text-align:center'><text > 此处 </text></view> </view> <view class="flex-item bc_blue" style='text-align:center'>3333此处的文本都是汉字</view> </view> </view>
.wxss
[code].page-section{ margin-bottom: 20rpx; } .flex-wrp {display: flex;} .bc_green {background: skyblue;width:100px; height: 100px;} .bc_red {background: red;width:100px; height: 100px;} .bc_blue {background: blue;width:100px; height: 100px;}
加油!
有问题再联系我。
阅读更多相关文章推荐
- 微信小程序开发--从block盒式布局到Flex弹性布局
- 微信小程序flex布局怎么实现上中下3行铺满整个窗口。
- 微信小程序 View:flex 布局
- 微信小程序 —— 多个view左右对齐的巧用方法(display:flex布局)
- 微信小程序页面布局之弹性布局-Flex介绍
- 微信小程序flex布局
- Flex 实现表格布局 (微信小程序)
- 小程序学习记录(二)——view、text、image标签、flex布局
- 微信小程序 Flex布局详解
- 微信小程序之Flex布局
- 微信小程序布局display flex布局介绍
- 小程序–flex布局常用css 设置
- 微信小程序布局display flex布局介绍
- 微信小程序前置课程:flex布局(二)
- 微信小程序 View:flex 布局
- 4、微信小程序学习:Flex布局
- 微信小程序开发之搞懂flex布局5——cross axis
- 微信小程序页面Flex布局
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性