CSS实心圆点制作教程

这篇文章深入剖析了CSS中实心小圆点看似简单却极易出错的对齐难题：虽然仅用`width`、`height`相等加`border-radius: 50%`就能画出圆形，但真正棘手的是让它在不同字号、行高和嵌套环境中始终与文字“钉”准对齐——根源在于内联元素默认按基线（baseline）排版导致视觉下沉；文章不仅揭示了`vertical-align`各值的真实含义（如`middle`并非对齐视觉中心而是x-height中线），还提供了经过验证的实战方案：优先采用`vertical-align: -0.125em`或`top: 0.25em`配合伪元素，结合`inline-block`前提与响应式尺寸单位选择（推荐`em`而非`px`或`rem`），帮你从排版逻辑、继承链到浏览器渲染细节层层击破，让那个不起眼的小圆点真正成为可靠、健壮、可缩放的UI基石。

直接给结论：用 width 和 height 相等 + border-radius: 50% 能画出圆，但“完美对齐”不只靠这两个属性——垂直居中、行内基线、父容器限制都会让圆点“看起来偏了”，必须一并处理。

为什么 border-radius: 50% 画出的圆点常和文字不对齐

根本原因是：默认的 display: inline 元素（比如 span）会按基线（baseline）对齐，而圆点的底边落在 baseline 上，文字的下沿也贴 baseline，导致圆点“沉”在文字下方。这不是圆没画圆，是排版逻辑在作祟。

常见现象：span.dot { width: 6px; height: 6px; background: #000; border-radius: 50%; } 放在文字前，明显偏低，尤其在小字号（如 12–14px）时更刺眼。

• 必须显式设置 vertical-align: middle 或 vertical-align: -0.125em（更精准）
• display: inline-block 是前提，否则宽高无效
• 若父容器有 line-height，它会挤压圆点上下空间，需同步检查

vertical-align 选 middle 还是 text-bottom？

别无脑写 vertical-align: middle。它的“middle”是对齐元素盒模型中点与父容器 x-height 中线（约小写字母 x 的高度中点），不是视觉中心。对 6–8px 小圆点来说，middle 往往仍略高。

实操建议：

• 优先试 vertical-align: -0.125em：基于当前字体大小微调，响应式友好
• 固定字号场景可测出像素偏移，例如 font-size: 14px 时常用 vertical-align: -2px
• 避免用 text-bottom 或 bottom，它们会让圆点贴底，和文字脱节更严重

伪元素法比纯 span 更干净，但要注意 position 偏移

用 ::before 插入圆点确实省 HTML，但容易忽略定位带来的错位：

• 父元素必须设 position: relative，否则 absolute 伪元素会相对于 body 定位
• 若用 top: 50%; transform: translateY(-50%) 垂直居中，要确认父元素有明确高度或 line-height，否则 50% 无参照
• 更稳的做法是：去掉 transform，改用 top: 0.25em（配合 font-size 比例）+ vertical-align: middle

示例关键片段：

.list-item {
  position: relative;
  padding-left: 16px;
}
.list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em; /* 靠上一点，抵消 baseline 下沉 */
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 50%;
  vertical-align: middle; /* 此处生效前提是 display: inline-block */
}

响应式下圆点尺寸该用 px 还是 em？

用 px 最直观，但会破坏缩放一致性；用 em 更健壮，但需注意继承链。

推荐组合：

• 尺寸用 0.375em（即 6px / 16px，默认字号），这样随 font-size 缩放自然
• 避免用 rem，除非你严格控制根字号，否则列表嵌套时易失控
• 如果项目强制要求图标尺寸绝对固定（如设计规范写死 4px），那就老实用 px，但务必配好 vertical-align 补偿值

真正难的从来不是画圆，而是让那个小圆点在各种字号、行高、嵌套层级里，始终“钉”在文字该在的位置——这需要你同时盯住排版逻辑、CSS 继承和浏览器渲染细节。

以上就是《CSS实心圆点制作教程》的详细内容，更多关于的资料请关注golang学习网公众号！