text-align: center对ul的项目符号无效，因其仅作用于内容框内文本流，而默认list-style-position: outside使符号悬于框外；需设list-style-position: inside并清空padding-inline-start才能让符号与文本整体居中。
无序列表的“标记对齐”本质不是文本对齐问题，而是符号绘制位置与容器边界的配合问题；直接调 text-align 对 ul 或 li 无效，必须控制 list-style-position 和外边距/内边距关系。
为什么 text-align: center 对 ul 的项目符号没用
浏览器把项目符号（bullet）画在内容框之外（list-style-position: outside 默认值），而 text-align 只作用于内容框内的文本流。你居中的是文字行，不是那个“悬在外面”的圆点。结果常是文字居中了，圆点还贴左边缘，看起来歪斜、错位。
常见错误现象：
- 给
ul设text-align: center，发现只有文字居中，圆点仍靠左 - 加
padding-left想“推”圆点，但圆点不动，只把文字往右挤 - 用
margin: 0 auto居中ul容器，但子项li内部符号和文本仍不对齐
真正起效的两个关键 CSS 属性
要让符号和文本整体“看起来对齐”，得同时管住符号位置和容器边界：
-
list-style-position: inside：把圆点画进内容框内，使其参与文本流排版，此时text-align才能连带影响它 -
padding-inline-start: 0（或padding-left: 0）：清掉浏览器默认的左侧内边距，避免符号被“藏”在看不见的地方 - 如果需保留符号在外部（比如兼容旧设计），就别碰
text-align，改用margin-inline-start手动微调整个ul的水平位置
示例（符号与文本一起居中）：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.list-centered {
list-style-position: inside;
padding-inline-start: 0;
text-align: center;
}
多级嵌套列表时符号错位更明显
嵌套 ul 里，每层默认 list-style-position: outside + 浏览器预设 padding-left，导致内层符号缩进不一致，视觉上“漂移”。
- 统一设
list-style-position: inside可消除层级缩进差异 - 用
margin-block-start: 0替代依赖margin-top，避免不同浏览器对ul默认外边距解析不一 - 若需保留缩进语义（如大纲层级），建议放弃原生符号，改用伪元素
::marker或背景图手动绘制，完全可控
RTL 文本下符号位置容易被忽略
当页面含阿拉伯语、希伯来语等从右向左语言时，list-style-position: outside 会让符号出现在右侧——但多数设计师仍按 LTR 习惯调试，导致上线后符号“跑右边”且无法点击区域对齐。
- 检查
dir属性是否正确设置（dir="rtl"） - 对 RTL 场景，
list-style-position: inside更稳定，因符号始终锚定在文本起始侧 - 避免混合使用
direction: rtl和text-align: left，这会破坏符号与文本的逻辑关联
最易被忽略的一点：符号是否可访问。用 list-style-position: inside 后，屏幕阅读器仍能正常播报“列表项”，但若用伪元素替代原生 ::marker，必须手动加 aria-hidden="true" 并确保 li 有明确语义角色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
