通过安装Alignment插件并配置`"alignment_chars": [{"char": ":", "align_mode": "middle"}]，可实现CSS属性冒号垂直居中对齐；需确保代码无注释、空行及缩进统一，避免字符串内冒号干扰。
怎么让 CSS 属性冒号自动垂直对齐
Sublime Text 默认不支持 CSS 冒号对齐，但通过 Alignment 插件 + 正确配置，能一键实现 color: red;、font-size: 14px; 这类属性的冒号居中对齐，大幅提升样式表可读性。
- 必须先安装
Package Control（若未装：按Ctrl + `调出控制台，粘贴官方安装脚本并回车） - 再按
Ctrl + Shift + P→ 输入Install Package→ 回车 → 搜索Alignment并安装 - 安装后默认只对齐等号（
=），CSS 冒号需手动配置才能生效
为什么装了 Alignment 却不对齐冒号
因为插件默认的 alignment_chars 列表里没有 :，它只识别 =、=> 等符号。不改配置，选中 CSS 规则按 Ctrl+Alt+A 就会“没反应”或只对齐意外出现的等号（比如变量声明里）。
- 打开菜单：
Preferences → Package Settings → Alignment → Settings - User - 填入以下配置（注意是 JSON 格式，结尾不能有多余逗号）：
{
"alignment_chars": [
{ "char": ":", "align_mode": "middle" },
{ "char": "=", "align_mode": "middle" }
],
"space_around_alignment_char": true
}
-
"align_mode": "middle"表示冒号本身居中对齐（即左右空格一致），比左/右对齐更符合 CSS 习惯 -
"space_around_alignment_char": true保证对齐后自动补上空格，如color : red→color : red（不是color: red）；若你坚持用无空格风格，可设为false，但需提前统一原始代码格式
对齐 CSS 时容易踩的坑
直接选中一段 CSS 块按快捷键，结果错位、漏行甚至崩溃？多半掉进了这几个常见陷阱。
- 混入注释或空行：插件会跳过不含
:的行。确保只选中纯属性行，例如不要包含/* comment */或空行 - 缩进不统一：有的行用 2 空格，有的用 Tab，有的顶格——Alignment 会以「最左非空字符」为基准对齐，导致视觉偏移。建议先全选 →
Ctrl+Shift+P→Indentation: Convert to Spaces统一为空格 - 属性值含冒号：比如
content: "a:b";，插件会把字符串里的冒号也当对齐点，造成错乱。此时应避免整段选中，或临时删掉引号内冒号再对齐 - 快捷键冲突：某些输入法（如搜狗）会劫持
Ctrl+Alt+A。可在Preferences → Key Bindings中检查是否被覆盖，或改用命令面板手动执行Alignment: Align by Assignment
不用插件也能临时救急吗
能，但仅限结构极简的 CSS（如 .env 或单层 key: value 配置）。正则替换快，但不可靠，不适合嵌套规则或带函数的值。
立即学习“前端免费学习笔记（深入）”；
- 打开替换面板：
Ctrl+H→ 点击.*启用正则模式 - 查找：
^(\s*)(\w+)\s*:\s*(.+)$ - 替换：
$1$2{:>15}: $3（数字15是字段宽度，根据最长属性名调整） - ⚠️ 注意：该正则不处理多行值、注释、媒体查询块，且无法智能保留原有缩进层级
真正写 CSS 时，还是配好 Alignment 用户设置最省心。关键在于：配置一次，全局生效；对齐前清理缩进和干扰行；冒号对齐 ≠ 强制所有 CSS 都要这么排版——语义清晰优先，格式是服务，不是枷锁。
