微信小程序——flex布局里的text汉字格式设置 - 好文

flex布局里的text汉字格式

代码放在最后。官方给的代码给的点此
<http://developers.weixin.qq.com/miniprogram/dev/component/view.html>
，我下面结果就是在此基础之上改的。

我们在微信开发者工具里，编辑显示的情况常常出现如下情况：

改后→

<text>标签在flex布局中不能居中，尤其是数字：

如果<text>是纯文本，显示就不会是这样的：

数字与文本混合的显示呢？看下图：

我也调试了很多情况，个人觉得配合字体大小设计flex尺寸，来避难出现这种情况比较稳妥。

然后是文本的居中显示，如下图：

文本设置style居中未能显示，然后一个view标签：

text-align:center

text-align 属性规定元素中的文本的水平对齐方式

值描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
另外还有其他的属性，请查看字体设置 <https://blog.csdn.net/qq_31496003/article/details/81077008>
（向后面翻一下）。

更改后的显示如下图：

下面附代码：

.wxml
<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
.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;}
加油！

有问题再联系我 <https://blog.csdn.net/qq_31496003/article/details/81077008>。

热门工具换一换