微信小程序——文字水平垂直居中

2023-10-26

记录一下CSS设置文字水平垂直居中。

1、代码说明

对于直接在标签里面的文字,使用flex布局控制其中的文字水平和垂直居中

1.1、Html

<!-- pages/test/test.wxml -->
<view class='myText'>水平、垂直居中</view>

1.2、CSS

/* pages/test/test.wxss */
.myText{
  /* 用弹性盒子设置居中 */
  display: flex;
  align-items: center;/* 垂直居中 */
  justify-content: center;/* 水平居中 */

  /* 为了看效果,设置背景色和尺寸 */
  background-color: green;
  width: 500rpx;
  height: 500rpx;
}
}

2、效果

水平垂直居中

点个赞,一起加油啊!!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序——文字水平垂直居中 的相关文章

  • 是否可以在 Javascript 中的 css3 转换期间获取目标计算的 css 属性值?

    是否有可能在 Javascript 中的 css3 转换期间获取目标 最终 计算的 css 属性值 我找到了这个答案 是否可以在 Javascript 中的 css3 转换期间获取目标 css 属性值 https stackoverflow
  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig
  • 如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容?

    我有一个父母div带有圆角 其中包含canvas div div
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre
  • 中心引导表宽度为 100%?

    table class table table striped table hover table responsive table
  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码(换行)

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • SaSS 循环使用

    我想创建类 将特定边距应用于我的块 例如 standard margin top margin top 10px standard margin bottom margin bottom 10px small margin top larg
  • 绝对定位的表头 (th) - 哪个浏览器是错误的?

    这个带有一个绝对定位列的简单表格在 Firefox 和 IE 中的呈现方式与在 Chrome 和其他基于 Webkit 的浏览器 中的呈现方式不同 http jsfiddle net WZ6x8 http jsfiddle net WZ6x
  • 具有一个 css 类的堆叠图标

    在新的 FontAwesome 4 0 0 中 堆叠项目有 css 样式 span class fa stack i class fa fa square o fa stack 2x i i class fa fa twitter fa s
  • 基本 CSS 问题 - 父 DIV 与未知子 DIV、居中父 DIV

    当我将 DIV 居中时 我会给它一个宽度并放置margin auto然而 我对这种情况有两个问题 该父 DIV 内将有 2 或 3 个带有 float left 的 DIV 子 DIVS 的宽度不会改变 但数量可能会改变 2 或 3 因此
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • 使用过渡+不透明度更改+溢出隐藏时出现问题

    如果您看到我共享的代码示例 您可以看到覆盖层超出了框的范围 我将问题追溯到transition属性 我想删除div之外的内容 溢出没有按预期工作 删除transition有效 但如果可能的话我想保留它 任何帮助表示赞赏 代码笔链接 http
  • 如何在 Bootstrap 4 中垂直对齐?

    我试图在 Bootstrap 4 4 0 0 alpha 6 中将我的大屏幕的内容垂直对齐在中心 在 Mac 桌面上的 Chrome 和 Safari 中 这种情况发生得很好 但在我的 iOS 设备上则不然 文本仍然与顶部对齐 我强制大屏幕
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • 文本溢出:省略号显示不同的字符

    我这里遇到了一些 CSS 问题 看这张图片 https www flickr com photos 125543025 N07 saved 1 在此图像中 我为文本 INTENSE TRAINING 添加了 CSS 样式 sample st

随机推荐

  • tcp短连接TIME_WAIT问题解决方法大全(1)——高屋建瓴

    tcp连接是网络编程中最基础的概念 基于不同的使用场景 我们一般区分为 长连接 和 短连接 长短连接的优点和缺点这里就不详细展开了 有心的同学直接去google查询 本文主要关注如何解决tcp短连接的TIME WAIT问题 短连接最大的优点
  • 【黑苹果教程】ELAN,FocalTech 以及 Synaptics 触控板驱动

    触控板上的手势操作应该是macOS的一大特色 但是黑苹果装完之后 很多人发现别说手势 很多基本的功能触控板都不能实现 此时你需要安装触控板驱动 本文参照osxlatitude论坛的ELAN FocalTech and Synaptics S
  • NMOS和PMOS详解以及电路设计

    一 简介 MOS管 是MOSFET的缩写 MOSFET金属 氧化物半导体场效应晶体管 简称金氧半场效晶体管 Metal Oxide Semiconductor Field Effect Transistor MOSFET 其中 G是栅极 S
  • apache 中 httpd.conf 的配置详解

    部分 1 全局环境 血泪提醒 rootDocument里面一定要有index php 或者index html 不然403错误 T T 本部分的表示将影响所有Apache的操作 例如 所能处理的并发请求数或配置文件地址 ServerType
  • Python拾遗2

    Python高级编程 第2版 1 常见的装饰器模式 参数检查 缓存 代理 上下文提供者 2 Python3新增函数注解 使用场景 类型检查 让IDE显示函数接受和返回的类型 函数重载 其他语言之间的桥梁 适配 谓词逻辑函数 数据库查询映射
  • python的输入与输出

    python输入 input 与输出 print 一 输入 input 在python3中 input会将接收到的用户输入自动存储为字符串类型 username input 输入用户名 cuihua print username cuihu
  • nlp-位置编码解析

    看到这里 是否记得前面提及Vaswani推出的Transformer结构 那么如果不使用RNN结构 是怎样表示位置信息的呢 在提信息位置技术前 先简介以下RNN和CNN RNN的序列结构不适合大规模并行训练 因为大家都知道 RNN对于序列问
  • matlab lstm工具箱,[转载]RNN以及LSTM的Matlab代码

    implementation of LSTM clc clear close all training dataset generation binary dim 8 largest number 2 binary dim 1 binary
  • LeetCode 667. 优美的排列 II

    题目链接 https leetcode cn problems beautiful arrangement ii C 代码如下 class Solution public vector
  • table元素无法固定列宽,width设置无效

    之前在做table的时候 因为不是用来做数据的展示的 所以对于具体的格式没有太高的要求 所以没有去深入了解 这次在做一个数据展示列表的时候使用table 因为假设每一个单元格数据是没有固定长度的 所以为了界面不会因为数据的变化格式发生大变化
  • okhttp报错:clientBuilder.sslSocketFactory(SSLSocketFactory) not supported on jdk 9+

    一 问题现象 最近在用okHttp处理http请求调用 编写jmeter压测脚本时 出现一个奇怪的问题 idea中可以正常调用 但是打成jar包后 在jmeter中去使用时 则调不通 报错 clientBuilder sslSocketFa
  • JavaScript在小程序网页部署实战

    服务端推理和前端推理对比 前端推理趋势 落地场景 单模型 多模型 全链路流程 JS2 0介绍 核心指标 技术方案 模型转换 核心组件 初始化和预测 计算方案 模型安全处理 加密目标 方案介绍 方案流程 关键路径 性能优化 代码处理 视频获取
  • webpack基础

    webpack基础 设置webpack模式的几种方法 npx webpack mode development mode的优先级高于env npx webpack env development webpack config js modu
  • HTML加载本地图片

    img src img src 也可以注意图片名就是1 而不是1 jpg 自己要加上对应的图片类型 转载于 https blog 51cto com 13930723 2372776
  • 计算机基本组成原理(简要笔记)

    计算机体系 一 冯 诺依曼体系结构 从Linux 服务器开发视角来看计算机 都是符合冯 诺依曼体系结构的 1 1 4大部分 1 1 1 输入 输出设备 输入设备 向计算机输入数据 比如通过摄像头 MIC 将图像 声音等转成二进制数据给计算机
  • flutter 顶部状态栏透明

    flutter 顶部状态栏透明 main js文件 void main 顶部状态栏透明 SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle statusBarColor Col
  • redis源码之:字典dict

    先来看看dict的大致结构 debug所用demo如下 void testDict int main int argc char argv testDict void testDict dict dict0 dictCreate hashD
  • SSH终端工具SecureCRT 8.5.4

    SecureCRT Mac版是mac上一款非常好用的SSH终端工具 可以为计算专业人士提供高级会话管理工具 从而提高效率工作并简化重复任务 SecureCRT为组织中的每个人提供安全的远程访问 文件传输和数据隧道 SecureCRT支持SS
  • OC门(Open Collector(Open Drain))

    OC门 又称集电极开路 漏极开路 与非门门电路 Open Collector Open Drain 为什么引入OC门 实际使用中 有时需要两个或两个以上与非门的输出端连接在同一条导线上 将这些与非门上的数据 状态电平 用同一条导线输送出去
  • 微信小程序——文字水平垂直居中

    记录一下CSS设置文字水平垂直居中 目录 1 代码说明 1 1 Html 1 2 CSS 2 效果 1 代码说明 对于直接在标签里面的文字 使用flex布局控制其中的文字水平和垂直居中 1 1 Html