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

Question

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

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

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

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

Centering Images in Button with Text

html

css

image

centering