html - 在 元素中使用图像

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

我想做的是将图像定位到按钮的左边缘，并将文本定位在中间或右侧。使用   可行，但可能有点粗糙。我尝试用 span 或 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/

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

子元素方法

前面的示例将使用 INPUT[type="button"] 以及 BUTTON。 BUTTON 标签允许包含标记，用于需要更大灵 active 的情况。重新阅读原始问题后，这里还有几个例子:http://jsfiddle.net/kLXaj/5/

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