CSS vertical-align：中间但不是中间

Question

我在一个高度为40px的锚中有一个内联块元素（span）。我尝试垂直居中跨度，但它的位置更可能接近底部。它不在中间。我怎么能真正垂直居中？

JSFiddle

HTML

<a>Admin<span></span></a>

CSS

a{
    display:block;
    border:1px solid #ccc;
    line-height:40px;
}

span{
    border:1px solid #ccc;
    width:24px;
    height:24px;
    display:inline-block;
    border-radius:50%;
    vertical-align:middle;
}

Answer 1

而不是

a{ line-height: 40px; }

使用

a{ height: 40px; }

然后以

为中心

a:before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

Demo