在提交按钮内插入图像和文本答案

【问题标题】：Insert image and text inside a submit button在提交按钮内插入图像和文本
【发布时间】：2015-04-03 04:42:26
【问题描述】：

我正在尝试将文本和飞机的小图像插入到提交按钮。不幸的是，图像上的文字重叠，我不知道如何对齐它。如何将文本“移动”到按钮右侧？有更好的方法吗？谢谢。

input[type="submit"] {
    width: 230px;
    height: 40px;
    border: none;
    background: url(../Images/Plane.png) #ff9900 no-repeat right;
    color: #fff;
    cursor: pointer;
}

这是 HTML

<input type="submit" value="SEND" id="submitForm">

【问题讨论】：

标签： html css

【解决方案1】：

只需添加此属性：

text-align:right;

【讨论】：

【解决方案2】：

这个问题有一个重复... HTML: How to make a submit button with text + image in it?

它的要点是图像应该在图像标签而不是背景标签中，这会影响文本和图像的位置。尝试将背景图像更改为按钮内的图像标记，因为背景图像与文本分开对我来说没有多大意义。

【讨论】：

【解决方案3】：

与其尝试平衡padding 和所需的对齐方式，不如使用<button> 元素，它可以执行“按钮式”操作并且包含其他（非交互式）HTML实体：

<button type="submit" id="submitForm">
     <img src="../Images/Plane.png" /> Send
</button>

使用 CSS：

#submitForm {
    width: 230px;
    height: 40px;
    border: none;
    background-color: #ff9900;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

#submitForm img {
    float: right;
}

【讨论】：