html - CSS 垂直对齐 :middle but not middle

Question

我在一个 anchor 内有一个内联 block 元素(跨度)，它的高度为 40 像素。我尝试将 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