如何让CSS伪类中插入的圆形图标与相邻文本实现垂直居中对齐

解决方案 #

给a标签开启flex布局控制内部元素垂直对齐即可，修改后可直接运行的代码如下：

完整CSS代码

.tag-wrap a {
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

/* 保留原svg写法的伪类样式 */
.tag-wrap a:before {
    content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);
    margin-right:4px;
}

优化方案（可选，无需svg）

如果不需要用svg实现圆形，可直接用纯CSS写圆形，代码更简洁易维护，替换伪类样式即可：

.tag-wrap a:before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    margin-right:4px;
}

HTML代码（无改动）

<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

内容的提问来源于stack exchange，提问作者AGamePlayer