如何在元素内容后面添加一个圆圈？ [复制]答案

【问题标题】：How can I add a circle behind the content of an element? [duplicate]如何在元素内容后面添加一个圆圈？ [复制]
【发布时间】：2020-11-24 19:20:54
【问题描述】：

我有一个网页。在这个页面中，我有几个我正在使用的字体图标。我想在这些图标后面加上一个灰色圆圈。实际上，我想在某些内容后面创建一个灰色圆圈。这时候，我在尝试，我有以下几点：

.circled {
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  padding: 1.0rem;
}

<div class="circled">
  <i class="my-icon"></i>
</div>

虽然内容是“圈起来的”，但圈子往往更像是一个椭圆形。我想总是渲染一个完美的圆圈。有没有办法用 CSS 做到这一点？如果有，怎么做？

【问题讨论】：

如果你想要一个圆圈，项目必须是方形。从那里开始。
或者，使用径向渐变

标签： html css

【解决方案1】：

使用display: flex 并将内容对齐并对齐到中心。

.circled{
height: 50px;
width: 50px;
  background-color: grey;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
 }

<div class="circled">
 <i class="my-icon">Icon</i>
</div>

【讨论】：

请正确阅读本题作者想要的内容。他不想在圆圈内有很多文字，而是想放置一个图标。
挑战是，我的内容是可变大小的。因此，我无法通过circle 类在父元素上设置height 和width 属性。我正在尝试找出一种更动态的方法。

【解决方案2】：

我提供了两个 sn-ps 代码来证明这应该适用于不同数量的正方形。

我通过制作一个正方形 square_holder 来容纳每个正方形。根据您希望行的显示方式，可能必须对square_holder 或square 进行调整。我个人喜欢三排。

试试下面的例子：

一个正方形

.circled {
  height: 100px;
  width: 100px;
  background-color: grey;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
}

.square_holder {
  height: 60%;
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.square {
  height: 30%;
  width: 30%;
  margin: auto;
  background-color: #555;
}

<div class="circled">
  <div class="square_holder">
    <i class="square">
    </i>
  </div>
</div>

九个广场

.circled {
  height: 100px;
  width: 100px;
  background-color: grey;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
}

.square_holder {
  height: 70%;
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.square {
  height: 30%;
  width: 30%;
  margin: auto;
  background-color: #555;
}

<div class="circled">
  <div class="square_holder">
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
  </div>
</div>

如果您有任何问题，请告诉我。

【讨论】：

挑战是，我的内容是可变大小的。因此，我无法通过circle 类在父元素上设置height 和width 属性。我正在尝试找出一种更动态的方法。
@Dev 更新了答案。让我知道它是否有帮助

【解决方案3】：

.my-icon::before {
 content: 'I';
}

.circle {
  background-color: gray;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  padding: 1.0rem;
}

<span class="circle my-icon">
</span>

【讨论】：

挑战是，我的内容是可变大小的。因此，我无法通过circle 类在父元素上设置height 和width 属性。我正在尝试找出一种更动态的方法。
是单个字符吗？
我认为你必须尝试使用 JS。