如何在html按钮中对齐文本两侧的图标答案

【问题标题】：How to align icon on both side of text in html buttons如何在html按钮中对齐文本两侧的图标
【发布时间】：2014-10-20 15:06:36
【问题描述】：

伙计们，我在文本的 2 侧使用带有图标的按钮，当文本较小时它可以工作，但有时我的文本较长，不得不将它们分成 2 行。怎么办？

<button type="submit"  class="button-orange width-280" > <img src="img/icon-getDetails.png"> Get More Details <img class="button-icon" src="img/icon-external-link.png">   </button>
<button type="submit"  class="button-orange width-280" > <img src="img/icon-basket.png"> Add to compare basket <span class="badge white">3</span> <img class="button-icon-chevron" src="img/icon-chevron-right.png">   </button>

我附上这张图片。我需要更长的文本也像第一个按钮一样出现。

【问题讨论】：

创建一个小提琴会更好..

标签： html css htmlbutton

【解决方案1】：

我没有你的 CSS，但我猜 width-280 类在按钮上添加了一个 width: 280px。

不要使用固定宽度，而是使用最小宽度。将width: 280px 更改为min-width: 280px。

【讨论】：

【解决方案2】：

您可以将图标设置为按钮上的背景图像，并将按钮的两侧填充到图标的宽度。请注意这个方法是not IE8 friendly。 :(

例如

HTML：

<button>
  Get more details
</button>

CSS：

button {
  background:
    url('img/icon-getDetails.png') top left no-repeat,
    url('img/icon-external-link.png') top right no-repeat;

  padding: 0 30px;
}

这里有一个fiddle，可能会帮助您想象它。

【讨论】：