text-align: center需作用于块级父容器（如div、ul、nav）才能使内部行内元素（如a标签）水平居中，直接加在a标签上无效；若用ul需配合li的display: inline-block实现横排居中，或改用flex布局更可靠。

用 text-align: center 对容器生效，不是对 @#@#@#@#@#@#@#@#@#@0 @#@#@#@#@#@#@#@#@#@1

如果用列表结构，对 <ul></ul> 设置 text-align: center 即可，<li> 默认是块级，会自动撑满再居中其内部文本

链接横向排列时，display: inline-block 是关键

默认 <li> 是垂直堆叠的，想让它们横排+居中，光靠 text-align 不够，还得控制子项的显示方式：

• <ul style="text-align:center"><li style="display:inline-block">@#@#@#@#@#@#@#@#@#@2</li></ul>
• 不加 display: inline-block，<li> 仍是块级，每个占一行，text-align 只能居中每行里的文字，不是整体居中
• 注意：inline-block 元素间有空格会留缝隙，可用 font-size: 0 在父容器上临时消除，或把 HTML 的换行/空格删掉

Flex 布局更可控，但要注意老浏览器兼容性

如果项目不需要支持 IE10 及更早版本，用 Flex 是最干净的方案：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• <div style="display:flex; justify-content:center; flex-wrap:wrap">@#@#@#@#@#@#@#@#@#@3 @#@#@#@#@#@#@#@#@#@4</div>
• justify-content: center 控制主轴（默认水平）居中；flex-wrap: wrap 防止小屏幕下溢出
• 不用管子元素是块还是内联，Flex 自动处理对齐逻辑
• IE10 需加 -ms- 前缀，且不支持 flex-wrap 的某些行为，线上项目建议先查目标用户浏览器分布

别忽略链接间距和响应式断点

居中只是第一步，实际页面里链接挤在一起或换行错位，往往是因为没处理好间距和断点：

• 横向链接之间加 margin（比如 margin: 0 12px），别依赖 HTML 空格
• 小屏幕下建议改用竖排：用媒体查询切换 flex-direction: column 或移除 inline-block 回归默认块级流
• 如果链接文字长度差异大，居中后视觉可能不均衡——这时考虑用 min-width 统一按钮宽度，或用 text-align: left 改为左对齐+整体容器居中

居中本身很简单，但真实页面里最常出问题的是：忘了清空默认 <ul></ul> 的 padding-left，或者在 Flex 布局里漏了 align-items 导致垂直不对齐。这些细节比“怎么居中”更容易卡住人。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！