code标签默认不支持text-align对齐，因其为行内元素；正确做法是将其置于可设置text-align的块级父容器中，或改为display:block/inline-block，多行代码推荐pre+code组合并作用于pre。
code 标签默认不支持 text-align 对齐
code 是行内元素（display: inline），CSS 的 text-align 属性对它本身无效——这个属性只作用于块级容器（如 div、p）来控制其内部**行内内容**的对齐，不能直接让 code 自己“居中”或“右对齐”。常见错误是写成：code { text-align: center; }，这不会生效。
让 code 文本居中/右对齐的正确做法
必须把 code 放进一个可设置 text-align 的块级父容器里，或者改写其显示模式：
- 包裹一层
div或p，并在父元素上设text-align: center（适用于单行代码块） - 直接给
code设display: block或display: inline-block，再配合text-align（父容器）或margin: 0 auto（仅对block且有固定宽度时居中） - 若需多行代码对齐，应改用
pre+code组合，并对pre设置text-align
示例（居中单行代码）：
<div style="text-align: center">
<code>console.log('hello')</code>
</div>
pre > code 组合时对齐行为更可控
语义上，pre 保留空白与换行，天然适合代码块；code 嵌套其中表示“这段预格式化文本是代码”。此时对齐由 pre 控制：
立即学习“前端免费学习笔记（深入）”；
-
pre { text-align: right; }→ 整个代码块右对齐（含缩进） -
pre { text-align: center; }→ 代码块按最长行居中，短行会悬空（不是每行居中） - 如需每行独立居中，得用
white-space: pre-wrap+text-align: center+display: inline-block等组合，但已偏离语义，慎用
注意 font-family 和空白处理带来的视觉错觉
对齐看起来“偏了”，往往不是 CSS 没生效，而是：
-
code默认使用等宽字体（如monospace），但不同浏览器默认值略有差异，建议显式声明font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; -
pre内部的换行符、首尾空格会被渲染，导致左右不对称；可用pre { margin: 0; padding: 0.2em 0.4em; }统一内边距 - 行高（
line-height）过大时，text-align的视觉中心可能和文字基线不一致，建议搭配vertical-align或调整line-height
真正要对齐的从来不是标签，而是你控制渲染上下文的方式。别在 code 上硬套 text-align，先想清楚：它该属于哪个容器，是否真需要脱离行内流。
