非零基础自学前端最后一遍一 HTML+CSS 6 CSS属性-文本 6.3 text-align基本使用

爱被打了一巴掌 2024-03-25 10:16 52阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  6 CSS属性-文本
         *   *  6.3 text-align基本使用
             *   *  6.3.1 text-align(重要)

![在这里插入图片描述][a6b7d2a8590b4f15ac8eb089bf42b9f5.png_pic_center]

#### 一 HTML+CSS ####

#### 6 CSS属性-文本 ####

##### 6.3 text-align基本使用 #####

###### 6.3.1 text-align(重要) ######

*  text-align: 直接翻译过来设置文本的对齐方式;
 *  MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;
 *  常用的值
    
     *  left：左对齐
        
        ![在这里插入图片描述][d0aa2e3575514636b4b9e10330df788c.png_pic_center]
     *  right：右对齐
        
        ![在这里插入图片描述][45259563d993427394c971845cb84b55.png_pic_center]
     *  center：正中间显示
        
        ![在这里插入图片描述][dc5c5f49a11048afb217afbef442d8c0.png_pic_center]
     *  justify：两端对齐
        
        ![在这里插入图片描述][03dda13aff8141deaa2128822e0aaa00.png_pic_center]
        
        需要一些额外配置
 *  W3C中的解释:
    
    ![在这里插入图片描述][10551d03816840e1b72adabdd2afa5cc.png_pic_center]

[a6b7d2a8590b4f15ac8eb089bf42b9f5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0298819ca556406b8562e52498644f0d.png
[d0aa2e3575514636b4b9e10330df788c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/294dcf2b5d574224862e324cb0192087.png
[45259563d993427394c971845cb84b55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/714d8c27be4b4562b657fcc6069ce26e.png
[dc5c5f49a11048afb217afbef442d8c0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/366bf783182e424f95e44de9c6f9c4f1.png
[03dda13aff8141deaa2128822e0aaa00.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/deb02e73f47f4517b65b6690daa98b97.png
[10551d03816840e1b72adabdd2afa5cc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3244abbcd8404a238206250e1f1c6108.png