Centering text by an image in a footer - html

Question

Ok, so i have been looking around for someone with the same problem as me, but didn't find any(almost 100% shure some of you guys are going to link to to one).
I have managed to center a div inside a div which again is inside footer(pretty shure overkill). But my problem is that i have centered two images with two lines of text connected to them. I want the text to be displayed vertically centered(with the image in mind), and not in the bottom right corner of the images, like now.
Pretty shure it's something simple, but here is a link:
http://jsfiddle.net/rdsdmuw8/
<footer>
<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
[phone]
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
Bryter-pedersen#hotmail.com
</div>
</div>
</footer>
*{
margin: 0px;
padding: 0px;
color: #fff;
}
footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}
#sosial {
text-align: center;
vertical-align: middle;
}
#sosial a{
list-style-type: none;
text-decoration: none;
}

Answer 1

In order to vertically align the img elements next to the anchors set vertical-align: middle for both of the elements.
#sosial img,
#sosial a {
vertical-align: middle;
}
In order to vertically center all the containing elements within the footer, you can use the table-cell/table approach.
#footer {
height: 100%;
width: 100%;
display: table;
}
#sosial {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Updated Exmaple
I removed the inline CSS styling in the example. You can use img:nth-of-type() to apply the margin to the second element. Just throwing options out there.
#sosial img:nth-of-type(2) {
margin-left:50px;
}

Answer 2

if you know what is the height you want for the images you can use, in my example is 50px:
#sosial a {
list-style-type: none;
text-decoration: none;
line-height: 50px;
display: inline-block;
height: 100%;
vertical-align: middle;
}