使用里面的图像<button>元素

我想包括一个图像和一些文本内的按钮元素。我的代码如下：使用里面的图像<button>元素

<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来包围图片和文字，然后定位这些图片，但这似乎弄乱了一切。

看上去发生的事情是，按钮标签内的任何东西（除非格式化）被定位为一个单位在一个更宽的按钮的中央（如果按钮宽度左侧自动调整，因为两个项目都是旁边的 - 侧。

任何帮助，一如既往，表示赞赏。谢谢你。

来源

2012-03-06 robert smith

Ba ckground图像处理

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

工作例如：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/

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

来源

2012-03-06 02:02:13

谢谢你的回答。我以为我读到你无法在后台调整图像大小。我错了吗？再次感谢。 – 2012-03-06 04:11:40

@robertsmith - 我想我最初误解了你的问题。我用更多的例子更新了我的答案。让我知道这是否适合你。 – 2012-03-06 04:25:25

你的第一个回答非常好，你所有这些例子的编辑都很棒！你的例子告诉我如何编写我想到的所有按钮类型。感谢您抽出宝贵的时间。 – 2012-03-06 05:22:06

添加浮动留给形象工程在一定程度上，明智地使用填充和图像尺寸调整的修复该问题具有卡文看到这个jsFiddle

来源

2012-03-06 01:58:11 Drakekin

如果你要使用的按钮内部图像不是在CSS我认为这可以帮助您：

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

来源

2012-03-06 02:07:25 Jay

这也适用。谢谢你的帮助。 – 2012-03-06 05:37:38

谢谢你真的很有帮助！ – 2017-01-02 21:25:21

更改按钮的显示风格，内联块，浮IMG到左。根据需要为img添加保证金。

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

来源

2012-03-06 02:22:20

使用里面的图像<button>元素

回答

相关问题