如何将文本垂直居中与内联块元素对齐

Question

我有以下代码：

JS Fiddle

---

HTML

<a href="#">
    text
    <ins></ins>
</a>

CSS

a {
    display:inline-block;
    height:50px;
    //vertical-align: middle; (does not change anything...)
}
ins {
    display:inline-block;
    height:50px;
    width:50px;
    background:blue;
}

---

现在，它看起来像这样：

---

但它应该是这样的：

---

如何实现文本的所需垂直对齐？

Answer 1

添加vertical-align：middle; ins：

ins {
    display:inline-block;
    height:50px;
    width:50px;
    background:blue;
    vertical-align: middle;
}

JS Fiddle

Answer 2

以<span>和

这样的格式获取文字

<a href="#">
    <span>text</span>
    <ins></ins>
</a>

span{
    float:left;
    margin-top:15px;
    margin-right:5px;
}

a {
    display:inline-block;
    height:50px;

}
ins {
    display:inline-block;
    height:50px;
    width:50px;
    background:blue;
}