text-align只控制块级元素内行内内容的水平对齐，不影响块级元素自身位置；2. 让块级元素居中需用margin:0 auto而非text-align:center；3. 响应式中可利用text-align:center轻松居中inline-block子元素；4. 使用justify需注意最后一行默认不拉伸及中英文间距差异问题，必要时配合text-align-last或结构调整以优化显示效果。
text-align 属性在 CSS 中主要负责控制块级元素内部的行内内容（比如文本、图片、行内块元素等）的水平对齐方式。它不影响块级元素自身的对齐，只管它“肚子”里的东西怎么摆放。
解决方案
text-align 属性的本质，就是决定一个盒子里的文字、图片或者其他行内元素靠左、靠右、居中，还是两端对齐。它只作用于其父级块元素内的“行内流”内容。常用的值有：
-
left：内容左对齐。这是大多数浏览器的默认行为。 -
right：内容右对齐。 -
center：内容居中对齐。这个用得特别多，比如你想让一段文字或者一张图片在父容器里居中显示时。 -
justify：内容两端对齐。它会调整单词和字母间的间距，让文本行的左右边缘都对齐到父容器的边缘，除了最后一行（除非也强制对齐）。
理解它的核心在于“行内内容”和“块级父元素”。如果你想对齐的是一个 div 这样的块级元素本身，text-align 是不起作用的。
立即学习“前端免费学习笔记（深入）”；
为什么 text-align: center 对块级元素不起作用？
这是很多前端新手会遇到的第一个坑，也是最常见的误解。我经常看到有人尝试用 text-align: center 去让一个 div 居中，结果发现完全没反应。原因很简单：text-align 的设计初衷就是为了处理行内内容（比如文本、<span>、<img>、<a> 等）在它们所属的块级父元素内部的水平对齐。
一个 div 元素本身是块级的，它默认会占据父容器的全部可用宽度（除非你给它设置了具体的宽度）。text-align 不会改变 div 这个块级元素自身在父容器中的位置。如果你想让一个块级元素（比如一个设置了宽度的 div）在它的父容器中水平居中，你需要使用 margin: 0 auto;。这利用了外边距的自动计算特性，将左右外边距均分，从而实现块级元素的居中。
举个例子：
/* 让文字居中 */
.text-container {
text-align: center; /* 这里的文字会居中 */
}
/* 让块级元素自身居中 */
.block-element {
width: 200px; /* 块级元素需要有明确宽度 */
margin: 0 auto; /* 左右外边距自动分配，实现居中 */
}这两种居中方式针对的目标完全不同，理解这一点能省掉不少调试时间。
text-align 在响应式布局中还有哪些巧妙应用？
除了最基本的文字对齐，text-align 在响应式设计中也能发挥一些意想不到的作用，特别是在处理一些简单的组件布局时。我个人觉得，它在某些场景下比 Flexbox 或 Grid 更轻量，更直接。
想象一下，你有一组图标和文字组合的列表，或者一系列需要水平排列的按钮。如果它们都是行内元素或行内块元素，并且你需要它们在不同屏幕尺寸下保持居中或某种对齐方式，text-align 就非常方便。
例如，一个底部导航栏，在桌面端可能希望链接分散对齐，但在移动端，你可能希望它们整体居中显示。如果这些链接是 display: inline-block; 的，那么给它们的父容器一个 text-align: center; 就能轻松搞定。
<div class="footer-nav">
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系方式</a>
</div>.footer-nav {
/* 桌面端可能默认左对齐，或者用flex布局 */
/* 但在移动端媒体查询中，可以这样处理 */
text-align: center; /* 让内部的a标签（inline-block）居中 */
padding: 10px 0;
}
.footer-nav a {
display: inline-block; /* 让a标签可以设置宽度和外边距，同时受text-align控制 */
padding: 8px 15px;
margin: 0 5px;
/* ...其他样式 */
}这种方法特别适合那些内容量不大、结构相对简单的行内元素组。它避免了引入复杂的 Flexbox 容器属性，让 CSS 看起来更简洁。当然，如果布局更复杂，Flexbox 依然是首选。
使用 text-align: justify 时需要注意什么？
text-align: justify 是一个很有意思的属性，它能让文本看起来更整齐，像报纸杂志的排版一样。但它也有自己的“脾气”，用不好可能会出现一些视觉上的小问题。
最大的问题通常出现在文本的最后一行。默认情况下，justify 只会对除了最后一行的所有行进行两端对齐。这意味着，如果你的段落只有一行，或者最后一行文本量很少，它就不会被拉伸，而是保持默认的左对齐（或根据 text-align-last 属性）。这可能导致最后一行看起来“参差不齐”。
如果你确实需要最后一行也强制两端对齐，你可以尝试使用 text-align-last 属性（但要注意浏览器兼容性，以及它可能导致单行文本被过度拉伸）。或者，通过一些非 CSS 的手段，比如在最后一行末尾添加一个零宽度的非断行空格 后面跟着一个 display: inline-block; width: 100%; 的伪元素，来“欺骗”浏览器。不过，这种做法有点 hacky。
另一个需要考虑的是，justify 会通过调整单词和字母间的间距来实现对齐。在某些字体和语言环境下，这可能导致间距过大或过小，影响阅读体验。特别是对于中文这种没有单词间隔的语言，justify 的效果可能不如西文明显，或者需要配合 word-break 或 white-space 属性来控制换行行为。
总之，justify 虽好，但用的时候要多测试，确保在各种内容长度下都能保持良好的视觉效果。有时候，一个简单的 text-align: left 或 center 反而更稳妥。
