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

前端之家收集整理的这篇文章主要介绍了微信小程序——flex布局里的text汉字格式设置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

flex布局里的text汉字格式

代码放在最后。官方给的代码给的,我下面结果就是在此基础之上改的。

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

改后

标签在flex布局中不能居中,尤其是数字:

如果是纯文本,显示就不会是这样的:

数字与文本混合的显示呢?看下图:

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

然后是文本的居中显示,如下图:

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

text-align:center

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

<table>
<tr>

值 描述 另外还有其他的属性,请查看
(向后面翻一下)。

更改后的显示如下图:

下面附代码

.wxml

<pre class="has">
<code class="hljs language-html"><view class="section">
<view class="section__title">flex-direction: row
<view class="flex-wrp" style="flex-direction:row;">

1 222 3 纯数字111 此处 3333此处的文本都是汉字

.wxss

<pre class="has">
<code class="hljs language-css">.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;}

加油!

有问题再nofollow">联系我。

猜你在找的微信小程序相关文章