将图片置于圆圈内

Question

我正在尝试在图像周围添加边框，但无论我做什么，我都无法将图像放在圆圈的中心。如果你能帮忙解决这个问题，我将非常感激。这是我的CodePen。

＆＃13;

＆＃13;

.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');
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从您的伪元素中移除position: absolute;，添加display: block;，然后将background-position应用于background-image。

.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>

Answer 2

你走了！避免使用CSS链接图像（仅适用于静态背景）。 如果你想在图像周围添加一条线，只需添加border属性。

＆＃13;

＆＃13;

img {
border-radius:50%;
background-color:red;
border: 10px solid black;
}

＆＃13;

<img src="https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300">

＆＃13;

＆＃13;

＆＃13;