在 <button> 元素中使用图像答案

【问题标题】：using images inside <button> element在 <button> 元素中使用图像
【发布时间】：2012-03-23 12:38:27
【问题描述】：

我正在尝试在按钮元素中包含图像和一些文本。我的代码如下：

<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>

CSS 是：

.testButton1
{
font-size:100%;
height:10%;
     width: 25%
}

.testButton1 img
{
height:80%;
vertical-align:middle;
}

我想做的是将图像放置在按钮的左边缘，并将文本放置在中间或右侧。使用 &nbsp 有效，但可能有点粗糙。我试图用 span 或 div 包围图像和文本，然后定位它们，但这似乎把事情搞砸了。

似乎正在发生的事情是按钮标签内的任何内容（除非已格式化）都作为一个单元定位在较宽按钮的中心（如果按钮宽度自动调整，则不明显，因为这两个项目是并排的-一边。

一如既往地感谢任何帮助。谢谢。

【问题讨论】：

标签： html css button

【解决方案1】：

背景图片方法

您可以使用背景图片并完全控制图片的位置。

工作示例：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;
}

一个稍微“漂亮”的例子：http://jsfiddle.net/kLXaj/1/

another example 显示基于:hover 和:active 状态的按钮调整。

子元素方法

前面的示例适用于INPUT[type="button"] 和BUTTON。 BUTTON 标记允许包含标记，适用于需要更大灵活性的情况。重读原题后，再举几个例子：http://jsfiddle.net/kLXaj/5/

这种方法会根据按钮的大小自动重新定位图像/文本，并提供对按钮内部布局的更多控制。

【讨论】：

感谢您的回答。我以为我读到您无法在背景中调整图像的大小。我弄错了吗？再次感谢。
@robertsmith - 我想我最初误解了你的问题。我已经用更多示例更新了我的答案。让我知道这是否适合您。
您的第一个答案很棒，您对所有这些示例的编辑非常棒！您的示例准确地向我展示了如何编写我想到的所有按钮类型。感谢您抽出宝贵时间。
有没有办法添加图片但保持按钮的默认样式？当我将背景图像放在银色风格消失时，你会得到这个可怕的扁平盒子。我已经回到一个带有图像标签的按钮作为后备。

【解决方案2】：

将按钮显示样式更改为 inline-block，img 向左浮动。根据需要为 img 添加边距。

<button style="display:inline-block">
  <img src="url" style="float:left;margin-right:0.5em">Caption
</button>

【讨论】：

【解决方案3】：

如果您想在按钮内而不是在 CSS 中使用图像，我认为这对您有帮助：

http://jsfiddle.net/FaNpG/1/

【讨论】：

谢谢它真的很有帮助！！

【解决方案4】：

在图像左侧添加浮动在一定程度上起作用。明智地使用填充和图像大小可以解决将文本粘在按钮顶部的问题。看到这个jsFiddle。

【讨论】：