如何在CSS中实现完美的实心小圆点_利用width与border-radius:50%对齐-css教程-PHP中文网

用 width 和 height 相等 + border-radius: 50% 能画出圆，但“完美对齐”需同步处理 vertical-align、display、line-height 及字体度量；根本原因是 inline 元素按 baseline 对齐，导致圆点视觉下沉。

如何在css中实现完美的实心小圆点_利用width与border-radius:50%对齐

直接给结论：用 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 往往仍略高。

实操建议：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

优先试 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 */
}