css text-align实现文字对齐技巧

text-align 控制块级元素中内联内容的水平对齐方式。

Left：h1 {text-align:center} 等文本向左对齐（默认值）。
Right：文本右对齐，如div{text-align:right}。
Center：中心对齐，如按钮导航 nav{text-align:center}。
Justify：我们需要使用 p::after{content:"";display:inline-block;width:1 00%} 来优化最后一行。

使图像居中：.container{text-align:center}。
将按钮居中：nav{text-align:center}; a{显示：内联块}。
多列对齐：.column{display:inline-block;width:3 0%;text-align:justify}。

对齐：p{text-align:justify}; p::after{内容：""；显示：内联块；宽度：1 00%}。
绝对居中：使用 .line-height= 容器高度作为一条线。
使用 .box{display:flex;justify-content:center;align-items:center} 表示多行。

注意： text-align 不影响块级元素定位。
浮动元素无效。
在 Flex/Grid 容器中无效。
justify 在 IE8 下没有得到很好的支持。

实用注意：先设置元素类型，再选择对齐方式。

CSS 文字对齐属性详解：text-align 和 justify-content

上周有客户问我这两个 CSS 属性 text-align 和 justify-content 有什么区别，它们的作用是什么？我向他详细解释了这一点。

首先，我们来谈谈文本对齐。
这是一个由来已久的属性。
它几乎可以用在所有块和内联元素中。
例如，如果您正在编写段落（
或

）或制作 link() 或标点符号（），则可以使用 text-align 来控制文本的水平对齐方式。
常用的值包括left-align（左）、right-align（右）、center-align（中心）、justify。
这尤其适合英语，因为可以调整英语单词之间的间距，使每行显得完整。
但是，使用这种双向对齐时必须小心。
如果元素不够宽，单词之间的间距可能看起来特别奇怪，尤其是在长中文文本中。
对于微调，建议使用文本对齐。

就justify-content而言，这个产品是比较高端的。
它仅适用于具有 Flex 或 Grid 布局的容器。
此属性用于控制容器中多行内容沿主轴的对齐方式。
例如，如果您正在创建导航栏菜单或图片库，则可以使用 justify-content 来均匀分布内部元素。
常用的值包括flex-start（左对齐）、flex-end（右对齐）、center（居中）、space- Between（两端对齐，中间元素等距）、space-around（等距，每个元素两边距离相等）。

这两个属性的区别主要体现在对齐对象和布局的依赖关系上。
text-align 对齐文本行，justify-content 对齐布局容器内的子元素。
text-align 可以独立使用，但 justify-content 必须基于 Flex 或 Grid 布局。
应用场景也各不相同。
使用 text-align 进行简单对齐text 和 justify-content 用于多行内容或复杂布局。

所以客人，这两个属性各有用途，你要根据你的页面布局的需要来选择。
为了更简单，使用text-align；如果更困难，请使用 Flex Layout + justify-content。
组合它们可以使您的页面布局更加精确。
无论如何，这取决于你。
我仍在思考这个问题以及如何最好地利用它。

标签： text-align justify-content