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水平对齐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。