将按钮中的图像与文本居中答案

【问题标题】：Centering Images in Button with Text将按钮中的图像与文本居中
【发布时间】：2015-12-27 15:02:03
【问题描述】：

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

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>

【问题讨论】：

标签： html css image centering

【解决方案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>

【讨论】：