text-align本质探究
-
text-align:直接翻译过来就是设置文本的对齐方式
-
MDN: 定义行内内容(例如文字)如何相对它的块父元素对齐,不控制块元素自己的对齐,只控制它的行内内容的对齐。
- 常用的值
left:左对齐
right:右对齐
center:正中间显示
justify:两端对齐
- W3C解释:
-
W3C: 大概意思是这个属性只是对行内级元素起作用,对块级元素不起作用。
-
代码演示:
-
left值:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { text-align: left; color: #fff; background-color: #f00; width: 500px; height: 100px; font-size: 18px; } </style> </head> <body> <div class="box"> 我是box的内容 </div> </body> </html>
-
right值:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca