在 <button> 中使用图像元素 [英] using images inside &lt;button&gt; element

问题描述

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

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>

CSS 是:

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

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

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

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 &nbsp 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.

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

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.

推荐答案

背景图片方法

您可以使用背景图像并完全控制图像定位.

You can use a background image and have full control over the image positioning.

工作示例: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/

A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/

和 另一个例子 显示了基于 :hover 和 对按钮的调整:active 状态.

And another example showing adjustments to the button based on the :hover and :active states.

子元素方法

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

The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag 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/

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

This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.

这篇关于在 <button> 中使用图像元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！