我正在尝试设置一个按钮,其格式与图像1中的格式相同。

我的div左侧有背景红色,在该div内有一个图像,并且我希望此图像在div的中心对齐。

然后我的红色div右边有按钮的文本。

图片1:

但是我有什么是这样的:

图片2

我的图片没有位于红色div的中心,并且按钮文字卡在了div中。

你看到我做错了什么吗?

这是我摆弄的我的 fiddle :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;
}

最佳答案

只需在此处使用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,最后将margin-top应用于.btn img
我认为background-color不需要包装元素,只需将其应用于img标记即可,因此,如果您不想使用包装元素,则可以引用下面的解决方案..

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

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

Demo 3

关于html - 尝试在<button>中使用图像和文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24960456/

10-12 13:00
查看更多