微信小程序元素水平居中或垂直居中

        最近在做一个微信小程序的项目,其中涉及到css样式实现将<navigator>标签内的图片和文本元素垂直排列,并水平居中。在尝试实现的过程中,将元素在标签内的所有排列情况都顺带实现了。上代码:

index.wxml

<navigator url="/pages/user/user-collect/index" hover-class="none" class="user-navigator"><image class="order-image" src="/public/img/5-8.png"></image><text class="text-black user-text">收藏</text>
</navigator>

index.wxss

.user-text {padding: 10% 0%;
}.user-navigator {display:flex;flex-direction: column;align-items: center;
}

顺带实现的其他排列情况index.wxss文件中的对用内容如下:

一、水平居中

1、排列方向为水平方向
.user-navigator{display: flex;align-items: center;
}
2、排列方向为竖直方向
.user-navigator{display: flex;flex-direction: column;align-items: center;
}

二、垂直居中


1、排列方向为水平方向
.user-navigator{display: flex;flex-direction:column;justify-content: center;
}
2、排列方向为竖直方向
.user-navigator{display: flex;justify-content: center;
}

三、中心居中

1、排列方向为水平方向
.user-navigator{display: flex;align-items: center;justify-content: center;
}
2、排列方向为竖直方向
.user-navigator{display: flex;flex-direction: column;align-items: center;justify-content: center;
}

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

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

相关文章

unity中的材质(material)贴图(texture)着色器(shader)介绍

TOC 在unity中&#xff0c;材质&#xff08;material&#xff09;、贴图&#xff08;texture&#xff09;和着色器&#xff08;shader&#xff09;是构建和渲染3D对象外观的基本概念 材质(material) 定义&#xff1a;材质是一个用于定义物体外观的资源&#xff0c;它将材质属性…

在模式的学习中发现了之前没有留意过的点

在模式的学习中发现了之前没有留意过的点 init 和 new 方法 通常我们在类中使用__init__方法来初始化对象, new()方法用于创建实例&#xff0c;类实例化之前会首先调用&#xff0c;它是class的方法&#xff0c;是个静态方法。而__init__()方法用户初始化实例&#xff0c;该方…

微积分复习笔记 Calculus Volume 1 - 4.2 Linear Approximations and Differentials

4.2 Linear Approximations and Differentials - Calculus Volume 1 | OpenStax

万圣夜,Codigger

在这个神秘的万圣节&#xff0c;让Codigger&#xff0c;一个专业的分布式操作系统&#xff0c;带领你踏入未知的编程世界&#xff01;就像变装成各种角色一样&#xff0c;Codigger也以其独特的能力和技巧&#xff0c;在数字世界中展现无穷魅力。让我们一起在这个神秘的节日里&a…

《神经网络助力战场车辆及部件损毁识别与评估》

《神经网络助力战场车辆及部件损毁识别与评估》 一、战场车辆损毁评估的重要意义二、传统战场车辆损毁评估方法&#xff08;一&#xff09;视觉评估法&#xff08;二&#xff09;仪器检测技术 三、神经网络在战场车辆损毁评估中的应用案例&#xff08;一&#xff09;射击毁伤评…

信而泰防火墙安全测试解决方案:为网络安全保驾护航

在当今数字化时代&#xff0c;网络安全至关重要。防火墙作为网络安全的第一道防线&#xff0c;其性能和可靠性直接影响到网络的安全性。信而泰提供的防火墙安全测试解决方案&#xff0c;旨在通过全面的测试流程&#xff0c;确保防火墙能够高效、准确地执行其安全任务。 针对防火…

Pinctrl子系统pinctrl_desc结构体进一步介绍

往期内容 本专栏往期内容&#xff1a; Pinctrl子系统和其主要结构体引入 input子系统专栏&#xff1a; 专栏地址&#xff1a;input子系统input角度&#xff1a;I2C触摸屏驱动分析和编写一个简单的I2C驱动程序 – 末片&#xff0c;有往期内容观看顺序 I2C子系统专栏&#xff1a;…

简单的kafkaredis学习之redis

简单的kafka&redis学习之redis 2. Redis 2.1 什么是Redis Redis是一种面向 “Key-Value” 数据类型的内存数据库&#xff0c;可以满足我们对海量数据的快速读写需求&#xff0c;Redis是一个 NoSQL 数据库&#xff0c;NoSQL的全称是not only sql&#xff0c;不仅仅是SQL&…

传奇996_15——有/无补丁添加衣服(角色/玩家)

过程和添加武器过程全部一样&#xff0c;区别在于分类&#xff0c;一个是武器&#xff0c;一个是角色/玩家 无补丁 直接修改装备表&#xff0c;没错和修改武器一样&#xff0c;还是修改装备表 有补丁 打包&#xff0c;打包文件放在D:\chuanqibanben2\客户端\dev\anim\playe…

【K8S】kubernetes-dashboard.yaml

https://raw.githubusercontent.com/kubernetes/dashboard/v3.0.0-alpha0/charts/kubernetes-dashboard.yaml 以下链接的内容&#xff1a; 由于国内访问不了&#xff0c;找到一些方法下载了这个文件内容&#xff0c; 部署是mages 对象的镜像 WEB docker.io/kubernetesui/dash…

Java 输入与输出(I\O)之对象流与对象序列化

什么是Java的对象流&#xff1f; Java对象流是用于存储和读取基本数据类型数据或对象数据的输入输出流。 Java的对象流可分为两种&#xff1a; 1&#xff0c;对象输入流类ObjectInputStream 用于从数据源读取对象数据&#xff0c;它是可以读取基本数据类型数据或对象数据的输…

Spearman相关系数和P值计算的MATLAB代码

% 导入数据 data readtable(data.xlsx);% 获取列名 columnNames data.Properties.VariableNames; numCols width(data);% 初始化Spearman相关系数和P值矩阵 spearmanCorr zeros(numCols); spearmanPValues zeros(numCols);% 计算Spearman相关系数及P值 for i 1:numColsfo…

fdisk - Linux下的磁盘分区利器

文章目录 前言一、安装和启动二、基本命令2.1 查看分区表2.2 删除分区2.3 创建新分区2.4 更改分区类型2.5 其他指令 三、注意事项四、其他相关工具 前言 在Linux系统中&#xff0c;磁盘管理是维护系统性能和数据安全的重要环节。fdisk 是一个强大的命令行工具&#xff0c;专门…

【解决】Linux环境中mysqlclient安装失败问题

问题描述 在Linux系统下安装myslclient报异常。系统为Centos 8 使用 pip install mysqlclient 报出下面的异常 error: subprocess-exited-with-error Getting requirements to build wheel did not run successfully.│ exit code: 1╰─> [30 lines of output]/bin/sh: pkg…

GitHub 上传项目保姆级教程

构建项目仓库 登录 GitHub 并进入主页。点击右上角的 New 按钮&#xff0c;进入创建新仓库页面。输入仓库名称和描述&#xff08;可选&#xff09;&#xff0c;选择是否公开&#xff08;Public&#xff09;或私有&#xff08;Private&#xff09;。可以选择是否初始化仓库&…

WPF中设置DataGrid的常用样式

1. 设置DataGrid控件的外观和行为 <!-- 定义一个名为DataGridDefault的样式&#xff0c;专门用于设置DataGrid控件的外观和行为 --> <Style x:Key"DataGridDefault" TargetType"DataGrid"><!-- 设置DataGrid在Grid布局中的行索引为1 -->…

计算机网络:网络层 —— 路由选择与静态路由配置

文章目录 路由选择路由选择的基本概念路由选择算法路由选择策略 路由器的工作原理路由表静态路由配置默认路由特定主机路由 路由选择 路由选择&#xff08;Routing&#xff09;是网络层的一个关键功能&#xff0c;负责在源和目的地之间选择最佳路径&#xff0c;以确保数据包高…

Pytest-Bdd-Playwright 系列教程(5):仅执行测试用例的收集阶段

Pytest-Bdd-Playwright 系列教程&#xff08;5&#xff09;&#xff1a;仅执行测试用例的收集阶段 一、为什么需要仅收集测试用例二、应用场景三、方法详解【方法1】&#xff1a;添加pytest.ini文件的addopts配置项【方法2】&#xff1a;通过命令行参数运行 四、CI/CD 环境下的…

联想笔记本电脑睡眠后打开黑屏解决方法

下载联想机器睡眠无法唤醒修复工具 下载地址&#xff1a;https://tools.lenovo.com.cn/exeTools/detail/id/233/rid/6182522.html 使用完后重启电脑&#xff0c;问题解决。

(11)(2.1.6) Hobbywing DroneCAN ESC(一)

文章目录 前言 1 连接和配置 2 参数说明 前言 具有 CAN 接口&#xff08;including these&#xff09;的业余 ESC 支持 DroneCAN&#xff0c;它允许自动驾驶仪通过 CAN 控制 ESC /电机&#xff0c;并检索单个转速、电压、电流和温度。 具有 CAN 接口&#xff08;including …