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

伙计们，我正在使用一个按钮，在文本的两面有一个图标，当文本变小时，这个按钮就可以工作，但有时我的文本变长了，不得不把它们分成两行。怎么做

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

获取更多详细信息
添加以比较篮子3

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

---

您可以将图标设置为按钮上的背景图像，并将按钮的侧面填充到图标的宽度。请注意，此方法是：(

比如说

HTML:

---

这里有一个可以帮助你想象的例子。

我没有你的CSS，但我猜类

width-280

会在按钮上添加一个

width:280px

---

不要使用固定宽度，而是使用最小宽度。将

宽度：280px

更改为

最小宽度：280px

创建小提琴会更好。。

<button>
  Get more details
</button>

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

  padding: 0 30px;
}