微信小程序文字水平垂直居中对齐问题

我们知道常用的居中对齐方式有很多种例如:

text-align:center;
align-items:center;
justify-content: center;
margin: auto;  #子容器在父容器中居中

但是在view中的文字对齐却不能简单的使用text-align: center;来实现,这种办法只能实现文字的水平居中,

要实现水平垂直居中

可使用如下方案

.td {

display: flex;

align-items: center;

justify-content: center;

}

使用了flex布局控制其中的文字水平和垂直居中

来源:https://blog.csdn.net/qq_32590631/article/details/80411024

原文地址:https://www.cnblogs.com/kongxc/p/9246214.html

时间: 2024-10-26 09:13:02

微信小程序文字水平垂直居中对齐问题的相关文章

微信小程序文字超过行后隐藏并且显示省略号

在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis; //文字隐藏后添加省略号 white-space:nowrap; //强制不换行 不过上面的css只能保证单行显示隐藏,如果想要2,3,n行隐藏呢?这个要求其实也是可以通过css做到的.下面贴出css: display

微信小程序文字超出加省略号

我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678 view{ overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 } 原文地址:https://www.cnblogs.com/520BigBear/p/9308549.html

微信小程序文字滚动marquee

data: { text: "如果预约时间不能到店则需要提前两个小时取消预约,如不足两个小时可联系技师取消预约", marqueePace: 0.5,//滚动速度 marqueeDistance: 0,//初始滚动距离 marquee_margin: 0, size:28, interval: 20 // 时间间隔 }, onShow: function () { var that = this; var length = that.data.text.length * that.da

微信小程序 scroll-view 水平滚动使用

1. scroll-view水平滚动使用 1. wxml <scroll-view class="scroll-wrap" scroll-x> <view class="scroll-view-item"> <view class="scroll-img-wrap scroll-major-img-wrap"> <image src="../../images/[email protected]

微信 小程序布局 水平菜单

<!-- 菜单列表部分 --> <view class="wear-menu"> <view class='menu-box' wx:key="menu" wx:for="{{menuList}}" wx:for-index="index"> <view class="menu-img" bindtap="selectMenu" data-ind

html 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐

对 input与label同时设置CSS input,label{ vertical-align:middle; }

教你怎么用微信小程序进行文字识别

如果我们想要摘录书本上的文字,其实不一定非要手动打录或者拿笔来摘抄.我们也可以用手机 来进行文字识别,快速的将你想要的文字给识别提取出来,还能节省时间.那我们如何用手机来 进行文字识别呢,最简单的方法还是用微信小程序,无需下载任何APP,点击进去就能使用,下面 小编就来教大家如何用微信小程序来进行文字识别 . 1.首先,我们打开手机微信,点击微信上的搜索框搜索"迅捷文字识别",找到这个小程序,然后点击 进去,进入小程序的界面之后,我们先点击"照片/拍照 ". 2.然

微信小程序之Flex布局

微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的.Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间. flex布局 Flex布局的特点: 任意方向的伸缩,向左,向右,向下,向上 在样式层可以调换和重排顺序 主轴和侧轴方便配置 子元素的空间拉伸和填充 沿着容器对齐 微信小程序实

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,