使用文本在按钮中居中图像

Question

在尝试了各种涉及填充和边距以及垂直对齐的技术之后，我没有运气试图将图像放在文本中心。实际的图像本身并不重要;他们的大小都一样。

＆＃13;

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在vertical-align: middle;代码中添加<img>：

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>