Html 在 <button> 元素中使用图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9576843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using images inside <button> element
提问by robert smith
I am trying to include an image and some text inside a button element. My code is as follows:
我正在尝试在按钮元素中包含图像和一些文本。我的代码如下：
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
CSS是：
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
我想要做的是将图像定位到按钮的左边缘，并将文本定位在中心或右侧。使用 有效，但可能有点粗糙。我试图用跨度或 div 包围图像和文本，然后定位它们，但这似乎把事情搞砸了。
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
似乎正在发生的事情是按钮标签内的任何内容（除非格式化）都被定位为一个更宽按钮中心的一个单元（如果按钮宽度被保留为自动调整，则不会注意到，因为两个项目是并排的。
Any help, as always, is appreciated. Thank you.
一如既往，任何帮助表示赞赏。谢谢你。
回答by Tim Medora
Background Image Approach
背景图像方法
You can use a background image and have full control over the image positioning.
您可以使用背景图像并完全控制图像定位。
Working example: http://jsfiddle.net/EFsU8/
工作示例：http: //jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}?
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
一个稍微“漂亮”的例子：http: //jsfiddle.net/kLXaj/1/
And another exampleshowing adjustments to the button based on the :hoverand :activestates.
而另一个例子显示调整基础上的按钮:hover和:active状态。
Child Element Approach
子元素方法
The previous example would work with an INPUT[type="button"]as well as BUTTON. The BUTTONtag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
前面的示例适用于INPUT[type="button"]以及BUTTON。该BUTTON标签允许包含标记和适用于需要更大的灵活性的情况。重新阅读原始问题后，这里还有几个例子：http: //jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
这种方法根据按钮的大小自动重新定位图像/文本，并提供对按钮内部布局的更多控制。
回答by Ferdinand Liu
Change button display style to inline-block, img float to left. Add margin to img as necessary.
将按钮显示样式更改为 inline-block，img 向左浮动。根据需要为 img 添加边距。
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
回答by Jay
If you want to use image inside the button not in the CSS I think this help you:
如果您想在按钮内而不是在 CSS 中使用图像，我认为这对您有帮助：
