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

我有以下代码：

---

HTML

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

---

现在，它看起来是这样的：

---

但它应该是这样的：

---

---

如何实现所需的文本垂直对齐？添加垂直对齐：中间；至ins：

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

用

和类似的样式获取文本

<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;
}

跨度{
浮动：左；
边缘顶部：15px；
右边距：5px；
}
a{
显示：内联块；
高度：50px；
}
ins{
显示：内联块；
高度：50px；
宽度：50px；
背景：蓝色；
}

Ahh，我想我终于开始理解这个属性是如何工作的了。非常感谢。

<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;
}