uniapp 文本局中
时间: 2024-02-10 16:09:31 浏览: 161
记账本前端资源(uniapp版本)
5星 · 资源好评率100%
在uniapp中,可以使用flex布局来实现文本的居中显示。具体的步骤如下:
1. 在需要居中显示文本的组件上,添加一个class类名,比如"center-text"。
2. 在对应的样式文件(通常是xxx.vue文件中的xxx.vue.wxss或者xxx.vue.scss文件)中,定义.center-text类的样式。
3. 在.center-text类中,使用flex布局,并设置justify-content和align-items属性为center,即可实现文本的水平和垂直居中。
示例代码如下:
```html
<template>
<view class="center-text">
<text>居中文本</text>
</view>
</template>
<style>
.center-text {
display: flex;
justify-content: center;
align-items: center;
}
</style>
```
这样,文本就会在父容器中水平和垂直居中显示了。
阅读全文