应优先用css控制排版：text-align仅影响块内行内内容，居中块本身需margin:0 auto+width；竖排时writing-mode改变line-height/margin/text-align作用轴向，须配text-orientation；多栏用flexbox/grid而非float；留白靠line-height和margin，禁用。
直接用 CSS 控制排版，别依赖 HTML 的 align 属性——它在 HTML5 中已废弃，浏览器可能忽略或行为不一致。
text-align 只作用于块容器内的行内内容
很多人以为给 <p></p> 加 text-align: center 是在“居中段落”，其实它只是让段落内部的文字、图片等行内元素水平居中；<p></p> 本身仍是块级元素，宽度占满父容器。如果想让整个段落（比如一个固定宽的引文框）在页面中居中，得配合 margin: 0 auto 和明确的 width。
-
text-align对<div>、<code><p></p>、<h1></h1>等块级元素有效，但只影响其子元素中的文本/图片/行内元素 - 对
float或position: absolute的子元素无效 - 竖排时（
writing-mode: vertical-rl），text-align控制的是“列”在容器中的水平位置（即左右对齐），不是行内方向 -
text-orientation: mixed（默认）：汉字直立，拉丁字母横排（适合标题混排） -
text-orientation: upright：所有字符强制直立，英文变成纵向排列（适合纯装饰场景，但阅读效率低） -
text-orientation: sideways：所有字符整体旋转90°，保持原有书写方向（较少用） - 注意：
text-orientation在 Safari 16.4+ 和 Firefox 112+ 才稳定支持，旧版需降级 fallback - 正文推荐
line-height: 1.6～1.8（无单位），避免用px值破坏缩放响应性 - 段落间用
margin-bottom: 1.2em，比固定像素更适配不同字号 - 首行缩进用
text-indent: 2em，不要用全角空格或 - 竖排时，
margin-right相当于横排的margin-bottom，用于控制“列间距” - 两栏图文混排：用
display: flex+flex: 1分配宽度，文字自动流式填充 - 杂志式多列文本：用
column-count: 3+column-gap: 2rem，原生支持分页断行 - 竖排多列布局：Grid 配合每个
.grid-item单独设writing-mode: vertical-rl，比 transform 旋转更语义、更可选、更利于屏幕阅读器 - 避免在竖排容器里嵌套
float—— 它会破坏 writing-mode 的流式计算逻辑
writing-mode + text-orientation 决定竖排效果是否可用
单纯设 writing-mode: vertical-rl 后，中文正常竖排，但英文默认仍横向显示为单个字母堆叠（如 “H T M L”），可读性差。必须搭配 text-orientation 才能统一控制字符朝向：
line-height 和 margin 是控制“呼吸感”的关键参数
排版易读性不靠字体多炫，而靠留白节奏。竖排和横排中，line-height 的作用方向会随 writing-mode 改变：横排时控制行高，竖排时控制“字距”（即上下字之间的垂直间隙）。而段落间距应由 margin 控制，不是靠多个 <br> 或空 <p></p>。
Flexbox/Grid 比 float 和 table 更可靠地组织多栏文本
老式多栏靠 float 或表格模拟，容易塌陷、换行错乱、响应式困难。现代布局应优先用 Flexbox（一维）或 Grid（二维）：
真正难的不是写对某一行 CSS，而是理解 writing-mode 改变后，line-height、margin、text-align 的作用轴向全都会翻转。一旦忽略这点，调试时就会反复怀疑是不是浏览器 bug。
