Centering Images in Button with Text

Question

After trying all sorts of techniques involving padding and margins and vertical-align, I've had no luck trying to get the images on center with the text. The actual images themselves don't matter; they're all the same size.

div#contactbuttons ul {
	padding-top: 30px;
	padding-bottom: 30px;

	overflow: hidden;
	
	font-size: 0px;
	
	
	
	text-align: center;
}

div#contactbuttons ul li {
	display: inline;
	
	margin-right: 90px;
	margin-left: 90px;
}

div#contactbuttons ul li a {
	color: white;
	
	text-decoration: none;
	
	font-family: Lane;
	font-size: 30px;
	font-weight: 100;
	
	padding: .5em 1em;
	
	background-color: #0B485C;
	
	border-style: solid;
	border-radius: 135px;
	border-color: black;
	
	display: inline-block;
}

img.contactlogo {
	height: 30px;
	width: 30px;
	
	padding: 0;

}

<div id=contactbuttons>

<ul>
<li><a href=# class=contactbutton>My Email <img class=contactlogo src=images/emaillogo.png></a></li>
<li><a href=# class=contactbutton>My Facebook <img class=contactlogo  src=images/fblogo.png></a></li>
<li><a href=# class=contactbutton>My Steam <img class=contactlogo src=images/steamlogo.png></a></li>
</ul>

</div>

Answer 1

Just add a vertical-align: middle; to your <img> tags:

div#contactbuttons ul {
	padding-top: 30px;
	padding-bottom: 30px;

	overflow: hidden;
	
	font-size: 0px;
	
	
	
	text-align: center;
}

div#contactbuttons ul li {
	display: inline;
	
	margin-right: 90px;
	margin-left: 90px;
}

div#contactbuttons ul li a {
	color: white;
	
	text-decoration: none;
	
	font-family: Lane;
	font-size: 30px;
	font-weight: 100;
	
	padding: .5em 1em;
	
	background-color: #0B485C;
	
	border-style: solid;
	border-radius: 135px;
	border-color: black;
	
	display: inline-block;
}

img.contactlogo {
	height: 30px;
	width: 30px;
	
	padding: 0;
    vertical-align: middle;
}

<div id=contactbuttons>

<ul>
<li><a href=# class=contactbutton>My Email <img class=contactlogo src=images/emaillogo.png></a></li>
<li><a href=# class=contactbutton>My Facebook <img class=contactlogo  src=images/fblogo.png></a></li>
<li><a href=# class=contactbutton>My Steam <img class=contactlogo src=images/steamlogo.png></a></li>
</ul>

</div>