1. text-align属性介绍
text-align CSS属性定义行内内容(例如文字 )如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。
上一段文字摘抄自 MDN对text-align属性的描述!
但是千万不要以为text-align仅对文本内容起到对齐作用。文中所指的“text-align 并不控制块元素自己的对齐,只控制它的 行内内容 的对齐。其中行内内容 既包括文本内容,也包括行内元素 。
试想,一个div块级元素内,有多个 行内元素,是不是可以使用text-align属性定义对齐方式呢!”
初始样式如下图,具体使用举例截图在

2. 文本居中
text-align:center, 运用在文本内容的父元素上,文本内容会居中显示。详见截图↓
3. 元素居中对齐
该截图中使用text-align:center;使得表格内button组居中对齐;并且设置 text-align:right;使得表格内button组居右对齐,形成对比!详见截图↓

OK,text-align属性到此结束,后续有新发现再补充!
本文介绍了CSS属性text-align的使用,不仅用于文本内容的居中对齐,还能够控制块级元素内的行内元素对齐。通过示例展示了text-align:center实现文本和按钮组的居中、居右对齐效果。
1423

被折叠的 条评论
为什么被折叠?



