微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐
语法
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。
西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在元素中居中。
提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
text-align:center 与 <center>复制代码
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
justify属性
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。
属性值
值 |
描述 |
left |
把文本排列到左边。默认值:由浏览器决定。 |
right |
把文本排列到右边。 |
center |
把文本排列到中间。 |
justify |
实现两端对齐文本效果。 |
inherit |
规定应该从父元素继承 text-align 属性的值。 |
小程序应用
Wxml代码
<view >文本内容(默认居左)</view><view class='mycenter'>文本内容(居中)</view><view class='mycenter'><text>文本内容(居中)</text></view><view class='myright'>文本内容(居右)</view><view class='myright'><text>文本内容(居右)</text></view><view class='myjustify'>当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭</view><view >当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭</view>复制代码
Wxss代码
text{background-color: gainsboro;}/*水平对齐*/.mycenter{text-align:
center; /*居中*/}.myright{text-align:
right;/*居右*/}.myjustify{text-align: justify;/*实现两端对齐文本效果*/}复制代码
效果如下图
微信小程序交流群:111733917
欢迎大家收看我的:微信小程序样式入门到精通(wxss,css)视频课程 https://ke.qq.com/course/368613?tuin=2b10d56
转载于:https://juejin.im/post/5ca2c1d3e51d45340226609b
微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐相关推荐
- [免费分享]微信小程序从入门到精通视频教程 [8.2G]
获取方式 公众号回复 wechat0423 获取下载地址, 好书推荐.视频分享,与您一起进步 目录:/微信小程序从入门到精通视频教程 [8.2G] ┣━━课件资料demo [7.7M]┃ ┣━━表单组 ...
- 微信小程序从入门到精通(二) 小程序的能力
前言 上一篇blog介绍了小程序的一些基础概念和代码构成以及主要的几个文件类型( 微信小程序从入门到精通(一) 基础知识与代码构成),那么本篇blog就继续围绕官方的简易教程以及QuickStart项 ...
- 视频教程-30小时微信小程序从入门到精通课程-基础篇-微信开发
30小时微信小程序从入门到精通课程-基础篇 8年IT开发经验,6年IT教育经验,喜欢把复杂逻辑用简单的表述传达给学生,传授编程知识,讲述生活故事 曹圣捷 ¥12.00 立即订阅 扫码下载「CSDN程序 ...
- 微信小程序从入门到精通(一) 基础知识与代码构成
前言 离上次写博客又有将近3个月了,一方面是换了新公司实在忙的要命,另一方面是因为自己确实懈怠了不少,有时突然感觉自己想学的东西很多,想重新拾起1.2年前的android开发技能,已经快忘光了,然而目 ...
- 微信小程序从入门到精通
目录 前言 一,初学小程序 1.1 小程序概述 1.2 基础配置 1.2.1 注册开发账号 1.2.2 获取AppID 1.2.3 微信开发者工具 1.2.4 修改代理模式 1.3 第一个小程序 1. ...
- 新手入门:微信小程序--从入门到精通宝典
<ignore_js_op> 作为新手入门的宝典,我们整理了本论坛各种有价值的内容,并按循序渐进的方式呈现给大家. 大家可以按顺序一篇一篇的攻克本帖中的内容,也可以作为字典,跳转至关注的 ...
- HTML微信小程序的页眉代码,微信小程序样式wxss各种问题总结(不断更新)
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
- 微信小程序开发笔记二(WXSS和CSS样式美化)
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
- 微信小程序样式 WXSS
微信小程序样式 WXSS 样式基础 尺寸单位 样式导入 内联样式 选择器 less语法 样式基础 类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示. WXSS 具有 CSS ...
最新文章
- LINUX中printf与echo的区别
- 大型Java项目架构演进
- 使用Docker Compose 部署Nexus后提示:Unable to create directory /nexus-data/instance
- 母根服务器对接 不准发信息,中国的母根服务器
- 架构师修练 I - 超级代码控
- uni-app 手指左右滑动实现翻页效果
- python教程2017百度云_python下载ICCV2017全套paper
- 计算机系统-任务切换
- 计算机公共基础课程标准,计算机应用基础》的课程标准.doc
- Ngrok让你的本地Web应用暴露在公网上
- 20165301课下作业
- php 放大镜代码,jQuery实现放大镜效果实例代码_jquery
- 『码上行动-编程擂台』学员作品展(附源码)
- MATLAB中median函数
- Ubuntu下无法启动wifi
- windows11应用商店错误:0x800704cf
- re匹配中文格式的字符
- 虚拟机屏幕自适应问题
- 2022电工(初级)考题及答案
- 孙源即将分享 DynamicCocoa 实现细节
热门文章
- WebService部署时提示:HTTP错误 404.3-Not Found,如果该页面是脚本,请添加处理程序,如果应下载文件,请添加MIME映射
- Eclipse中安装插件时提示:No repository found containing: osgi.bundle,org.eclipse.emf,2.8.0.v20180706-1146
- C#中提示:当前上下文中不存在名称“ConfigurationManager”
- 学习ribbon,进来看看吧
- 敏捷项目计划的多层面
- nanopi基础配置
- 5g通用模组是什么_广和通发布全新5G模组FG650,搭载展锐中国“芯”
- erp二次开发有出路吗_ERP的真正技术瓶颈:详细生产排程!
- c#拼图碎片形状_拼图游戏C#代码
- opencv 获取一个目录下子目录_OpenCV系列 --- OpenCV4.01配置VS2015