微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-align水平对齐

蔚落 2024-02-19 15:54 37阅读 0赞

### text-align水平对齐 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**语法**  
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。  
西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。  
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与 <CENTER>

您可能会认为 text-align: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;/*实现两端对齐文本效果*/
    }

效果如下图  
![欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css 1]  
![微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[wxss_css]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cbdbe3b0894441629124473ce6154559.png
[wxss_css 1]: https://ke.qq.com/course/368613?tuin=2b10d56
[wxss_css 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c7081276e67a469982a1051a3debd1db.png