尝试在<button> </button>中使用图像和文本

Question

我试图在我的图片1中设置一个格式与按钮相同的按钮。

我在左边有一个背景为红色的div，在这个div里面我有一个图像，我希望这个图像在我的div的中心对齐。

然后我的红色div右侧有我的按钮文字。

图片1：

但我有的是这个：

图片2

我没有将我的图像放在我的红色div的中心，我的按钮文字被卡在我的div中。

你看到我做错了吗？

这是我的问题，我有：http://jsfiddle.net/nXuU2/2/

这是我的HTML

<button class="btn">               
    <div id="btn_container"><img  src="http://placehold.it/30x30" width="30" height="30"/></div>
    <span>Button link 1</span>
</button>

我的CSS：

   .btn
{

    position: relative;
    width: 200px;
    height: 60px;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;

    font-size: 16px;
    color: #333;
    background:gray;
}

#btn_container
{
    width:40px;
    height:40px; 
    border-radius:5px;
    background:red; 
    float:left;
}

.btn img 
{  
    margin-right: 10px;
    vertical-align:middle;
}


.btn span
{
    display:inline-block;
    width: 120px;
    vertical-align:middle;
}

Answer 1

只需在此处使用CSS定位，使用红色背景div制作position: relative;并使用absolute制作img标记

Demo

.btn img {  
    left: 50%;
    margin-left: -15px; /* 1/2 of total width of your img */
    top: 50%;
    margin-top: -15px; /* 1/2 of total height of your img */
    position: absolute;
} 

---

Demo 2 （替代方法，您不需要CSS定位）

在演示2中，您不需要CSS定位，只需从margin-right移除.btn img并在text-align: center;上使用#btn_container，最后应用{ {1}}至margin-top

---

我不认为你需要.btn img的包装元素，只需申请background-color标签，所以如果你不想使用你的包裹元素而不是参考下面的解决方案..

<强> CSS

img

<强> HTML

.btn img {  
    display: inline-block;
    vertical-align: middle;
    background: #f00;
    padding: 5px;
    border-radius: 5px;
}

Demo 3

Answer 2

尝试以下HTML和CSS代码：

HTML代码：

<button class="btn">               
    <div id="btn_container">
      <img  src="http://placehold.it/30x30" width="30" height="30"/>
      <span class="btn-txt">Button link 1</span>
    </div>
</button>

CSS代码：

.btn {
    background: #fff;
    border:3px solid grey;
    padding: 5px;
    width: 200px;
    text-align:left;
}
#btn_container img {
    border: 6px solid red;
    margin-right: 5px;    
    vertical-align: middle;
}
.btn-txt {
    vertical-align: middle;
}

查看JSFiddle上的DEMO

Answer 3

您可以通过更新img和span

的边距来解决问题

.btn img 
{  
    margin-left: 5px;
    margin-top: 5px;
}

.btn span
{   
    display:inline-block;
    width: 120px;
    margin-top: 10px;
    margin-left: 10px;
}

Answer 4

除了上面的答案，您还可以添加行高以匹配容器的高度，以强制按钮文本进入居中位置。另外，我使用text-indent将文本推离图像。

.btn span { line-height: 60px; text-indent: 10px;}
.btn img { margin: 5px; }
#btn_container { margin: 10px 0 0 0; }

Fiddle