HTML / CSS如何添加图像图标到input type =" button"？ [英] HTML / CSS How to add image icon to input type="button"?

问题描述

我使用下面的CSS，但它在按钮的中心放置一个图像。使用< input type =button> 左右对齐图标的任何方式，以使文本和图像适合和对齐？

  background：url（'/ common / assets / images / icons / 16x16 / add.png'）; 
 background-position：center; 
 background-repeat：no-repeat; 
  

解决方案

如果绝对必须使用输入，请尝试：

  background-image：url 
 background-repeat：no-repeat; 
 background-position：< left | right> ;; 
 padding-< left | right> ;:< image of image> px; 
  

使用按钮通常会更容易一些与 img 之间：

 < button type =submit >< img>文字< / button> 
  

但是，按钮是不一致的，以及当使用按钮时发送所有按钮值的事实 - 其在多提交表单中杀死什么按钮点击检测。 p>

I'm using the below CSS, but it puts an image in the center of the button. Any way to left or right align an icon using <input type="button">, so that the text and the image fit and align nicely?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

解决方案

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.

这篇关于HTML / CSS如何添加图像图标到input type =" button"？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！