如何强制Materialize CSS通知徽章始终显示为圆形？

云上老周

2026-5-26

让Materialize通知徽章始终保持圆形的解决方案

嘿，这个问题很常见！Materialize的默认徽章是自适应内容宽度的，所以数字多了自然会被拉成椭圆形。要让它不管显示多少数字都保持圆形，只需要给你的.notification-badge类补充几个关键CSS属性就行，我给你两种实用方案：

方案一：固定宽高+居中对齐（最稳妥）

直接给徽章设置相同的宽高，再配合圆角和居中布局，就能强制保持圆形。如果遇到长数字，调整字体大小避免溢出即可：

.notification-badge {
  position: relative;
  color: #ffffff;
  background-color: #FF4081;
  /* 新增核心属性 */
  width: 28px; /* 根据你的需求调整大小 */
  height: 28px; /* 必须和宽度一致 */
  border-radius: 50%; /* 强制圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; /* 三位数字可改为12px */
  padding: 0; /* 清除默认padding，避免影响宽高 */
  white-space: nowrap; /* 防止数字换行 */
}

为什么这样有效？

固定宽高让元素始终是正方形，border-radius: 50%会把正方形变成完美圆形
Flex布局确保数字在徽章里垂直水平居中，不会出现偏移
清除默认padding避免内容撑开元素，保持尺寸稳定

方案二：自适应最小圆形（适合需要小范围弹性的场景）

如果不想固定死宽高，希望数字少时徽章小一点、数字多时保持圆形不拉伸，可以用min-width+min-height配合max-width限制：

.notification-badge {
  position: relative;
  color: #ffffff;
  background-color: #FF4081;
  /* 新增核心属性 */
  min-width: 24px;
  min-height: 24px;
  max-width: 24px; /* 和min-width一致，限制最大宽度 */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 4px; /* 给长数字留一点内部空间 */
}