How to align text vertically centered together with inline-block elements [duplicate]

Question

This question already has answers here:

Vertically align horizontal inline-block elements (3 answers)

Closed 9 years ago.

I have the following code:

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

---

Now, it looks like this:

---

But it should look like this:

---

How can I achieve this desired vertical alignment of the text?

Answer 1

Add vertical-align: middle; to ins:

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

JS Fiddle

Answer 2

Get your text in a <span> and style like that

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