使用<button>元素内的图像

Question

我试图在按钮元素中包含图像和一些文本.我的代码如下:

<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;
}

我想要做的是将图像定位到按钮的左边缘,并将文本放在中间或右侧.使用 作品,但也许有点粗糙.我试图用跨度或div来包围图像和文本,然后定位它们,但这似乎搞砸了.

似乎正在发生的事情是按钮标签内的任何内容(除非格式化)都被定位为一个单元位于更宽按钮的中心(如果按钮宽度保持自动调整则不明显,因为两个项目是并排的.

任何帮助,一如既往,表示赞赏.谢谢.

Answer 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/

而另一个例子显示调整基础上的按钮:hover和:active状态.

儿童元素方法

前面的例子会与工作INPUT[type="button"]以及BUTTON.该BUTTON标签允许包含标记和适用于需要更大的灵活性的情况.重新阅读原始问题之后,还有几个例子:http://jsfiddle.net/kLXaj/5/

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

Answer 2

将按钮显示样式更改为内联块,img浮动到左侧.根据需要为img添加边距.

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

Answer 3

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

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