微信小程序元素/文字在横向和纵向实现居中对齐、两端对齐、左右对齐、上下对齐

元素对齐往往是新学者的一大困惑点,在此总结常用的各种元素和文字对齐方式以供参考:

初始显示

.wxml

<view style="width: 100%;height: 500rpx; background-color: lightgray;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

ef07b97875d8449e9a7a2de30d9baa9a.png

初始定义元素,默认显示在左上角。

元素居中

水平居中关键代码:justify-content: center;

竖直居中关键代码:align-items: center;

.wxml

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex; align-items: center; justify-content: center;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

e31744bc81494ffdbfb9a5f09f7ac34f.png

元素水平两端对齐

关键代码:justify-content: space-between;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex; align-items: center; justify-content: space-between;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

d49ecc078f304c77878ff4838b8403d8.png 

 元素竖直两端对齐

关键代码:flex-direction: column; justify-content: space-between;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex; flex-direction: column; justify-content: space-between;align-items: center;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

116f1adcc7e045068a56730c5fdfe9be.png

元素左对齐

关键代码:justify-content: flex-start;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex; justify-content: flex-start;align-items: center;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

0d373a64a79c40d9982502d6d187632c.png 

元素右对齐

关键代码:justify-content:flex-end;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex; justify-content:flex-end;align-items: center;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

 8633651beb9446eb83f7674a06bac28f.png

元素上对齐

关键代码:flex-direction: column; justify-content:flex-start;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex;flex-direction: column; justify-content:flex-start;align-items: center;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

6d7afc7dac0146eb8ab9f3c5ae4a9d0e.png 

元素下对齐

关键代码:flex-direction: column; justify-content:flex-end;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex;flex-direction: column; justify-content:flex-end;align-items: center;"><view style="width: 200rpx;height:100rpx;background-color: aqua;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow">元素2</view>
</view>

955fa34f927c4062ab7c2585dce14802.png

文字居中对齐

文字其他对齐方式可以参考元素对齐

关键代码:justify-content:center;align-items: center;

<view style="width: 100%;height: 500rpx; background-color: lightgray; display: flex; justify-content:center;align-items: center; "><view style="width: 200rpx;height:100rpx;background-color: aqua; display: flex; align-items: center; justify-content: center;">元素1</view><view style="width: 200rpx;height:100rpx; background-color:yellow; display: flex; align-items: center; justify-content: center;">元素2</view>
</view>

e1c01d9772fb46fd8b1d398aaa9934d2.png

可以在wxml的style参数中修改元素显示样式,也可在wxss文件定义样式。 

更多内容欢迎关注博主。

有用的话欢迎打赏。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年NOC大赛(学而思赛道)创意编程Python初中组决赛真题

2023年NOC大赛&#xff08;学而思赛道&#xff09;创意编程Python初中组决赛真题 题目总数&#xff1a;7 总分数&#xff1a;100 编程题 第 1 题 问答题 二进制回文 编程实现: 输入一个正整数&#xff0c;判断它的二进制形式是否是回文数&#xff0c;如果是输出True…

MySQL建表练习

练习题目&#xff1a;通过所提供的E-R图和数据库模型图完成库表的创建&#xff0c;并插入适量的数据.要求必须使用SQL命令进行构建。 已知如下&#xff1a; 1、创建客户信息表&#xff1a; 代码&#xff1a; CREATE DATABASE Bank; //建库CREATE TABLE Userinfo(Cust…

MacBook自带邮箱设置

MacBook自带邮箱设置 邮件—->偏好设置 服务器设置 收件服务器(POP) 用户名: xxxxxxliang 密码: ***** 主机名:mail.xxx.com.cn 自动管理连接设置 勾上 发件服务器(SMTP) 帐户:xxx.com.cn 用户名:xxxxxxliang 密码:**** 主机名:mail.xxx.com.cn 注意: 自动管理连接设置 不…

JAVA获取时间间隔

参考代码&#xff1a; public ActionResult computingTime(RequestParam("startDate") DateTimeFormat(pattern "yyyy-MM-dd HH:mm:ss") Date startDate,RequestParam("endDate") DateTimeFormat(pattern "yyyy-MM-dd HH:mm:ss") Da…

蓝桥杯备战——2.矩阵键盘

1.分析原理图 由上图可以看到若J5跳线帽接地&#xff0c;就S4~S7就可以当做四路独立按键&#xff0c;若接到P44&#xff0c;则就是4*4的矩阵键盘。 2.独立按键处理 相对传统的按键延时消抖方案&#xff0c;这里我采用更高效&#xff0c;更经典&#xff0c;更偏向产品级应用的…

Mybatis 简单用例

MyBatis 是一个优秀的持久层框架&#xff0c;它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息&#xff0c;将接口和 Java 的 POJOs (Plain Old Java Object…

[Linux基础开发工具---vim]关于vim的介绍、vim如何配置及vim的基本操作方法

一、vim及其三种模式的简单介绍 Vim是一个类似于Vi的文本编辑器&#xff0c;不同的是vim是vi的升级版本&#xff0c;它不仅兼容vi的所有指令&#xff0c;而且还有一些新的特性在里面,如多级撤销、多窗口操作、崩溃后也可以恢复、增加了稳定性、关键字自动补全、上下文自动补全等…

系统架构14 - 软件工程(2)

需求工程 软件需求两大过程三个层次业务需求(business requirement)用户需求(user requirement)功能需求 (functional requirement)非功能需求 概述活动阶段需求获取基本步骤获取方法 需求分析三大模型数据流图数据字典DD 需求定义需求验证需求管理需求基线变更控制过程变更控制…

【一】从零到1设计一个丧葬行业小程序

初步构想 背景&#xff1a;丈母娘家开了一家丧葬行业的门面&#xff0c;每年就过年几天开一下&#xff0c;但是这样也导致每到过年就必须守在门面&#xff0c;无法过一个轻松的年&#xff0c;所以就想做一款小程序&#xff0c;只用于本地乡镇里进行推广。 主营&#xff1a;烟…

基于卡尔曼滤波的平面轨迹优化

文章目录 概要卡尔曼滤波代码主函数代码CMakeLists.txt概要 在进行目标跟踪时,算法实时测量得到的目标平面位置,是具有误差的,连续观测,所形成的轨迹如下图所示,需要对其进行噪声滤除。这篇博客将使用卡尔曼滤波,对轨迹进行优化。 优化的结果为黄色线。 卡尔曼滤波代码…

SQL查询数据库环境(dm8达梦数据库)

SQL查询数据库环境dm8达梦数据库 环境介绍 环境介绍 某些环境没有图形化界面,可以使用sql语句查询达梦数据库环境情况 SELECT 实例名称 数据库选项,INSTANCE_NAME 数据库选项相关参数值 FROM V$INSTANCE UNION ALL SELECT 授权用户,(SELECT AUTHORIZED_CUSTOMER FROM V$LICE…

对话框与多窗体设计 —— 自定义对话框及其调用

3.2 自定义对话框及其调用3.3 Splash与登录窗口 3.2 自定义对话框及其调用 在一个应用程序设计中&#xff0c;为了实现一些特定的功能&#xff0c;必 须设计自定义对话框。自定义对话框的设计一般从 QDialog继承&#xff0c;并且可以采用UI设计器可视化地设计对 话框。对话框的…

vivado DDS学习

实现DDS通常有两种方式&#xff0c;一种是读取ROM存放的正弦/余弦信号的查表法&#xff0c;另一种是用DDS IP核。这篇学习笔记中&#xff0c;我们要讲解说明的是VIVADO DDS IP核的应用。 目前本篇默认Phase Generator and SIN/COS LUT&#xff08;DDS&#xff09;的standard模式…

Python NLP:自然语言入门(Python和Java)

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是一种涉及将计算机与人类语言进行交互的技术。它涉及将自然语言文本转换为计算机可以理解和处理的形式&#xff0c;以实现各种任务&#xff0c;如文本分类、情感分析、机器翻译等。 Python和…

【SpringCloud Nacos】 微服务治理介绍及Nacos引入初体验

文章目录 前言服务治理介绍什么是服务治理1、服务发现2、服务配置3、服务健康检测 常见的注册中心ZookeeperEurekaConsulNacos Nacos 简介Nacos 实战入门搭建nacos环境1、安装nacos2、配置nacos3、访问nacos 将商品微服务注册到 nacos1、在 pom. xml 中添加 nacos 的依赖2、在主…

npm设置源(原淘宝源域名已过期)

今天打包机器报错&#xff0c; Couldnt find package "antd-mobile2.3.4" required by "neo-ui-mf-base1.0.41" on the "npm" registry. 找不到antd mobile的包&#xff0c;查看源发现淘宝域名npm.taobao.org 和 registry.npm.taobao.org 域名…

spring cloud之分布式事务

写在前面 1&#xff1a;分布式事务介绍 参考MySQL之分布式事务 。 2&#xff1a;seata实战 架构图&#xff1a; 可以看到seata在这里作为协调者的角色&#xff0c;协调所有事务的提交以及回滚&#xff0c;其中seata使用MySQL存储每个分支事务的执行状态信息&#xff0c;以…

gitlab设置/修改克隆clone地址端口

最近由于公司要停测试库云服务器? 什么?要停测试库服务器??? 是的! 你没听错。 真是醉了,多大的集团,为了省钱,也真是拼了, 作为开发人员,没有测试服务器,犹如断臂之人。 所以,在之前搭建环境的时候都没有写文档,今天算是弥补上,以后都可以作为参考了, …

MySQL和Redis的事务有什么异同?

MySQL和Redis是两种不同类型的数据库管理系统&#xff0c;它们在事务处理方面有一些重要的异同点。 MySQL事务&#xff1a; ACID属性&#xff1a; MySQL是一个关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;支持ACID属性&#xff0c;即原子性&#xff08;Ato…

云原生管理工具dashboard--Kube Sphere(k8s)和Portainer(Docker)安装

Kube Sphere 安装 推荐直接使用All in One 安装模式安装&#xff0c;最为简单&#xff0c;同时安装kube Sphere也支持同时安装好k8s的环境 官方安装网址如下&#xff0c;写的很详细&#xff0c;也贴心的准备了中国地区安装的网络问题应对方式 在 Linux 上以 All-in-One 模式…