html - 使文字在按钮中居中

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

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>

最佳答案

只需将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>

关于html - 使文字在按钮中居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34478308/