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

我想要做的是将图像定位到按钮的左边缘，并将文本放在中间或右侧。使用＆amp; nbsp作品，但也许有点粗糙。我试图用spans或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标记允许包含标记，适用于需要更大灵活性的情况。重新阅读原始问题之后，还有几个例子：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/

Answer 4

向图像添加浮动效果在一定程度上起作用。明智地使用填充和图像大小修复了将文本粘在按钮顶部的问题。请参阅此jsFiddle。

使用<button>元素</button>中的图像

4 个答案: