当前位置: 首页 > news >正文

微信小程序将组件中的文字放置在正中间的方法

正常组件使用默认的属性时,只需要设置text-align属性为center即可,如下:
demo.wxml

<view class="test">测试</view>

demo.wxss

.test{
  background-color: aqua;
  text-align: center;
}

效果图:
在这里插入图片描述
如果此时将view组件的高度加高(设置height属性为100rpx)会出现下面的情况,文字在水平方向上的正中心,而不在垂直方向的正中心。
在这里插入图片描述
解决方法如下,把文字单独放在一个text标签中,用view标签包裹,view标签设置为flex,通过设置align-items和justify-content属性实现居中效果。
demo.wxml

<view class="test">
  <text>测试</text>
 </view>

demo.wxss

.test{
  background-color: aqua;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

效果图:
在这里插入图片描述

相关文章:

  • linux脚本开头的#!/bin/bash有什么作用
  • git如何撤销未提交的更改
  • Qt动态更改界面语言(在运行状态下改变界面语言)
  • .gitignore文件---让git自动忽略指定文件
  • 解决QMYSQL driver not loaded问题
  • 信息安全之对称加密技术
  • 信息安全之非对称加密技术
  • 信息安全之数字信封原理
  • 信息安全之信息摘要技术
  • 信息安全技术之数字签名
  • 设置Mysql C API断线自动重连
  • mysql_query()和myql_real_query()的区别
  • mysql_store_result和mysql_use_result的区别
  • linux下实时跟踪文件变化tail指令
  • 解决windeployqt打包QML程序无法启动的问题
  • Js基础知识(一) - 变量
  • js作用域和this的理解
  • RxJS: 简单入门
  • tab.js分享及浏览器兼容性问题汇总
  • vuex 学习笔记 01
  • Zepto.js源码学习之二
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 前端攻城师
  • 如何合理的规划jvm性能调优
  • 一文看透浏览器架构
  • 1.Ext JS 建立web开发工程
  • 阿里云ACE认证学习知识点梳理
  • #etcd#安装时出错
  • (pojstep1.3.1)1017(构造法模拟)
  • (附源码)spring boot基于小程序酒店疫情系统 毕业设计 091931
  • (附源码)springboot炼糖厂地磅全自动控制系统 毕业设计 341357
  • (附源码)计算机毕业设计ssm高校《大学语文》课程作业在线管理系统
  • (学习日记)2024.01.19
  • (转)Google的Objective-C编码规范
  • (转)http协议
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • (转载)PyTorch代码规范最佳实践和样式指南
  • ... 是什么 ?... 有什么用处?
  • /*在DataTable中更新、删除数据*/
  • /proc/vmstat 详解
  • @manytomany 保存后数据被删除_[Windows] 数据恢复软件RStudio v8.14.179675 便携特别版...
  • @Pointcut 使用
  • @SpringBootApplication 包含的三个注解及其含义
  • @基于大模型的旅游路线推荐方案
  • [ web基础篇 ] Burp Suite 爆破 Basic 认证密码
  • [] 与 [[]], -gt 与 > 的比较
  • [2023-年度总结]凡是过往,皆为序章
  • [APIO2012] 派遣 dispatching
  • [C#基础知识系列]专题十七:深入理解动态类型
  • [C/C++]数据结构 循环队列
  • [c++] 什么是平凡类型,标准布局类型,POD类型,聚合体
  • [CTF]php is_numeric绕过
  • [Electron] 将应用打包成供Ubuntu、Debian平台下安装的deb包
  • [Matlab有限元分析] 2.杆单元有限元分析