Check out my JSFiddle below:
In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame.
I've tried adjusting the margins in various ways, but nothing seems to work for me. Could the issue be related to using "display: inline-block;" or are there other factors causing the problem?
<div class="server-info">
<div style="z-index: 99; width: 32px; height: 32px;
margin-top: 9px;
margin-bottom: 9px;
margin-right: 3px; display: inline-block;" id="load-icon"></div>
<div style="display: inline-block; margin-top: 5px;
margin-bottom: 5px; height: 40px;">XXX<br>YYY </div>
</div>
CSS
.server-info {
border-radius: 0.4em 0.4em 0.4em 0.4em;
border-top: 0 none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
color: white;
display: inline-block;
margin-left: 0.5em;
padding: 0 1em;
vertical-align: top;
font-size: 1em;
margin-top: 1.6em;
padding-left: 1em;
padding-right: 1em;
text-align: left;
text-transform: none;
background: none repeat scroll 0 0 #000000;
}
#load-icon
{
background-image: url("http://www.smilecarwash.com/images/ajax-loader.gif");
background-repeat: no-repeat;
}
Update: Apologies for the incorrect fiddle link - here's the correct one.