How to align text vertically next to p class image - html

Question

I've got a pop out image in CSS, and i've implemented it into my html. I would just like to know how I can add text that is vertically aligned with the centre of the image (before you hover it)
EDIT: Sorry guys, I should have clarified that I want the text right of the image, with the centre of the text and centre of the image vertically aligned
I've managed to place it in the correct place using absolute position. However, what would I do if i have multiple icons using the same class?
p.social-popout {
height: 48px;
width: 48px;
margin: 10px;
float: left;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
float: left;
}
p.social-popout img {
border-radius: 50%;
margin: 8px;
width: 100%;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
float: left;
}
p.social-popout img:hover {
margin: 0px;
box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
float: left;
}
<p class="social-popout"><img src="http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png" /></p>

Answer 1

try it
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
or use
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Answer 2

You can make your p is relative, and make text content abosolute.
Hope it will help you
p.social-popout {
position: relative;
height: 48px;
width: 48px;
margin: 10px;
float: left;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
float: left;
}
p.social-popout img {
border-radius: 50%;
margin: 8px;
width: 100%;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
float: left;
}
p.social-popout img:hover {
margin: 0px;
box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
float: left;
}
p.social-popout span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
line-height: 0;
color: #f70000;
font-size: 20px;
font-weight: bold;
}
<p class="social-popout"><img src="http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png" /><span>text</span></p>