当前阅读教程:微信小程序设计教程 > 水平对齐(text-align) | |||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||
上一篇: 文本 | 下一篇: 文本最后行对齐(text-align-last) | ||||||||||||
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。 西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在元素中居中。 提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。 (1)text-align:center 与 <CENTER>你可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。 <CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。 (2)justify属性在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。你也许已经注意到了,两端对齐文本在打印领域很常见。 需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。 属性值如下:
2.小程序应用下面举例说明如何在微信小程序中定义text文本在view中的水平对齐方式和两端对齐文本。 .wxml文件代码示例 如下: <view > <!--文本默认在view中居左--> 文本内容(默认居左) </view> <view><!—定义文本在view中居中--> 文本内容(居中) </view> <view><!—定义文本text在view中居中--> <text>文本内容(居中)</text> </view> <view><!—定义文本在view中居右--> 文本内容(居右) </view> <view><!—定义文本text在view中居中--> <text>文本内容(居右)</text> </view> <view><!—定义文本在view中两段对齐--> 小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。</view> <view > <!—默认效果,见图3-7,右侧虚线框处没有对齐--> 小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。</view> .wxss文件代码示例 如下: text{ background-color: gainsboro; } /*水平对齐*/ .mycenter{ text-align: center; /*居中*/ } .myright{ text-align: right;/*居右*/ } .myjustify{ text-align: justify;/*实现两端对齐文本效果*/ } 效果如图3-7所示。 |
|||||||||||||
上一篇: 文本 | 下一篇: 文本最后行对齐(text-align-last) |