如何将 css 类图像与文本居中？

【问题标题】：how to center css class images with text?如何将 css 类图像与文本居中？
【发布时间】：2012-12-22 12:46:17
【问题描述】：

我得到了什么：
http://jsfiddle.net/nCs88/

我想得到什么：
http://img545.imageshack.us/img545/888/42576e33afe343a0bab6a40.png

我是一个绝对的初学者，我试图让按钮图像与文本居中。永远感谢任何让我沮丧几个小时的帮助。

【问题讨论】：

标签： html css image text block

【解决方案1】：

只需将vertical-align:middle 应用于这两个类。

jsFiddle example

添加：

.dbutton, .ctrlbutton {
    vertical-align:middle;
}

【讨论】：

【解决方案2】：

试试这样的

<style type="text/css">
 .itButton{
    border:1px solid #abc; 
    display:table-cell; 
    text-align:center;        
    /* width:200px */  
  }    
 .itBtn{
    display:inline-block; 
    vertical-align:middle; 
    margin:5px 5px 5px 5px;
  }
</style>

和

<div class="itButton">
   <div class="itBtn"><img src="user.png" alt="" /></div>
   <div class="itBtn">My Button</div>
</div>

【讨论】：