css:如何绘制带有旁边文字的圆圈

Question

我想知道如何使用 CSS 在 Logo 中仅围绕两个字母绘制一个圆圈。

请查看附图

这是我使用的代码，但是没有用

.badge {
  height: 60px;
  width: 60px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: #337EFB;
  padding:-5px;
}

<span><a class="badge" href="/">fb</span><span>keeper</span></a>

Answer 1

将.badge的显示设置为inline-block，并使用line-height让文字垂直居中。

注意:要使整个标题可点击，请将外部 span 替换为 a 标签，并将内部的转换为 span 标签。

.title {
  font-size: 2em;
  text-decoration: none;
  color: var(--title-color);
  --title-color: #337EFB;
}

.badge {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  background: var(--title-color);
  color: white;
}

<a class="title" href="#">
  <span class="badge" href="/">fb</span>
  <span>keeper</span>
</a>