Align vertically an image and two lines of text - html

Question

I read many articles, many posts here, but unfortunately I can't center 2 lines of text and an image vertically.
<a class="button" href="">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
Button
<span>Button alt</span>
</a>
I would like the 2 lines next to the image (centered), and center the whole content vertically in the .button.
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;
display: block;
}
img {
vertical-align: middle;
}
At CSS-Tricks I found an article, but I don't want to use position:absolute to center. Is there any clean way to center the texts/image in the <a>?
JsFiddle: http://jsfiddle.net/7fx3eozd/

Answer 1

you can also wrap the text and span inside a div then wrap that div and img inside another div then add these classes:
also add display: inline-block; on your img
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
JSFIDDLE DEMO
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;;
display: block;
}
img {
vertical-align: middle;
display: inline-block;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
<div class="btnText">
Button
<span>Button alt</span>
</div>
</div>
</a>

Answer 2

You can add display: table-cell to element with class .button and vertical-align: middle:
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: table-cell;/*change display to table-cell*/
vertical-align: middle;/*add vertical align middle*/
}
span {
font-size: 11px;
color: #ccc;
display: block;
}
img {
vertical-align: middle;
}
<a class="button" href="">
<img src="http://dummyimage.com/30x30/cf97cf/fff">Button
<span>Button alt</span>
</a>

Answer 3

You can wrap img and span inside a div (with class center)
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
Button
<span>Button alt</span>
</div>
</a>
then add this css:
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Explain: Set position of div with top 50%, then move it to top with 50% its height (translateY by -50%)