非零基础自学前端最后一遍一 HTML+CSS 6 CSS属性-文本 6.4 text-align本质探究

蔚落 2024-03-25 10:16 39阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  6 CSS属性-文本
         *   *  6.4 text-align本质探究

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

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

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

##### 6.4 text-align本质探究 #####

试试让一个图片居中

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

OK，是没问题的。所以说这个名字取的不怎么好

试试输入框

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

块级元素

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

OK， 效果很明显，它作为一个div没有居中，所以说MDN 的解释也不太准确，最后官方文档的解释

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

这就说明白了，div 是一个块级的，并不是行内级，所以text-align 拿它没办法

可以把里面这个div 设置为行内级

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

妙啊

其实对于块级元素来说，设置其自身居中还有一种方法

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

妙啊。

[aa66361a36e24d598aa04d18eff96e7d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/378426d22c1f46b08e80df1369a75a14.png
[7f35557cbb1045148fe1dc7090e478ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ca7e76380ce649219511810f2a0eecb7.png
[f742428113774635a66145b30da91773.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/77accdf9113b4be39b41fbb0ebcbc657.png
[d1d4ed72bb1d4ae08c0ea6bafa216514.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ea5ba1c4f08b4b3c989004caffd9b146.png
[b1a975ce60c34e379952b42dc5fe81ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1edea1def4644baf95a43cfe2e5d327e.png
[6d628a2829c84dcbbd28c2398acedc18.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d0bf4be047c64236982b8df974aba4b2.png
[438d2af598314f90a128a10b48798a15.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/08e2556f48b743dc97b4a62597702273.png