按钮左侧的图像和文本中心对齐

Question

我正在尝试制作一个带有图像的按钮和一些文本.我希望图像在左边对齐,文本完全居中.文本应该以整个按钮的宽度为中心,而不是图像的剩余宽度.

我尝试了跨度但没有成功

<a href=#><button class="lightgray-btn rightbuttons"><span class="demoimage"><img class="btnimg" src="..." alt="" /></span><span class="demotext">"some text</span></button></a>

我也想避免使用background-image:url,因为在移动设备中我担心文本会出现在图像上

谢谢

Answer 1

这对你有用.

button {
  position: relative;
  padding: 15px 40px;
  text-align: center;
}
.btnimg {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

  <button class="lightgray-btn rightbuttons">
    <img class="btnimg" src="http://lorempixel.com/output/food-q-c-27-24-8.jpg" alt="" />
    some text
  </button>