html - 将图片居中放置在一个圆圈内

Question

我想在图像周围添加边框，但无论我做什么，我都无法将图像定位在圆圈的中心。如果您能帮助解决这个问题，我将不胜感激。这是我的 CodePen .

.firstcell::after {
  border: 2px solid rgba(138, 223, 199, 0.74);
  border-radius: 500%;
  content: "";
  position: absolute;
  left: 2px;
  height: 32px;
  width: 32px;
}

.firstcell.status_1 {
  background-repeat: no-repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAXZJREFUSA1jYBgFoyFAaQgwggz4uzDwPzkG/f7/X4UjYcNdfHqZ8ElSQ47mFlAUROGS/Qe+MXLwwHzKyMhwZ6uLRBSQDw9yinzwk4ldA2jWGUZGxsr///9V/2dgNPXa9TIdZiGIpsgCiEGMt7a6iO/Z7ia1i/Hv33BGpv/NTpsfS8MsYYExyKWBYczlvOeJMEj/D4Z/Dzj+MU7n5GCdBuT6g8Qo9wEjYwsHA+sbGGZgYqplYGT089750oo6FoBMwQL+M//lAwlj8cF/UAr4jkUPfqH//7+hKPjPwA3io1gATAlv2BI3vmGOX885Y++99Sga8HCOFfju3OoqwXU4230JMIH+BSllZGSeD6LBkfzvP0MPiJO54ALn33//U4HM3OxFFyenOSmBxUFy2ADnvx9/nz24z/v+yqksoLzxp5sXzn64c7mNX0WHE2jRD2x6mIGCP4EYFEwo6RmbYiSxO1A9F5DEcDJBlqjjlMUtYYJbalRmIEMAAKGecc1FS0saAAAAAElFTkSuQmCC');
}

<div class="container-fluid">
  <h1>Some Title</h1>
  <table class="table table-hover table-striped">
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th>Title</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="firstcell status_1"></td>
        <td>Name1</td>
        <td>Title1</td>
        <td><a href="#">Link1</a></td>
      </tr>
      <tr>
        <td class="firstcell status_1"></td>
        <td>Name2</td>
        <td>Title2</td>
        <td><a href="#">Link2</a></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

从伪元素中删除 position: absolute;，添加 display: block;，然后将 background-position 应用到 背景图像。

.firstcell::after {
  border: 2px solid rgba(138, 223, 199, 0.74);
  border-radius: 500%;
  content: "";
  height: 32px;
  width: 32px;
  display: block;
}

.firstcell.status_1 {
  background-repeat: no-repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAXZJREFUSA1jYBgFoyFAaQgwggz4uzDwPzkG/f7/X4UjYcNdfHqZ8ElSQ47mFlAUROGS/Qe+MXLwwHzKyMhwZ6uLRBSQDw9yinzwk4ldA2jWGUZGxsr///9V/2dgNPXa9TIdZiGIpsgCiEGMt7a6iO/Z7ia1i/Hv33BGpv/NTpsfS8MsYYExyKWBYczlvOeJMEj/D4Z/Dzj+MU7n5GCdBuT6g8Qo9wEjYwsHA+sbGGZgYqplYGT089750oo6FoBMwQL+M//lAwlj8cF/UAr4jkUPfqH//7+hKPjPwA3io1gATAlv2BI3vmGOX885Y++99Sga8HCOFfju3OoqwXU4230JMIH+BSllZGSeD6LBkfzvP0MPiJO54ALn33//U4HM3OxFFyenOSmBxUFy2ADnvx9/nz24z/v+yqksoLzxp5sXzn64c7mNX0WHE2jRD2x6mIGCP4EYFEwo6RmbYiSxO1A9F5DEcDJBlqjjlMUtYYJbalRmIEMAAKGecc1FS0saAAAAAElFTkSuQmCC');
  background-position: 40% 40%;
}

<div class="container-fluid">
  <h1>Some Title</h1>
  <table class="table table-hover table-striped">
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th>Title</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="firstcell status_1"></td>
        <td>Name1</td>
        <td>Title1</td>
        <td><a href="#">Link1</a></td>
      </tr>
      <tr>
        <td class="firstcell status_1"></td>
        <td>Name2</td>
        <td>Title2</td>
        <td><a href="#">Link2</a></td>
      </tr>
    </tbody>
  </table>
</div>