Button with left image and aligned text center

advertisements

i am trying to make a button with an image in it and some text. i want the image to be align at left and the text to be fully centered. The text should be centered at the width of the whole button and not at the remaining width cause to the image.

i tried with span but with no success

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

i also want to avoid the background-image:url because in mobile i am afraid that the text would be on the image

thank you


This will work for you.

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>