円内の画像の中央揃え

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

background-imageにbackground-positionを適用し、その後、display: block;を追加し、あなたの擬似要素からposition: absolute;を削除します。

.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属性を追加するだけです。

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

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