Vertically Alignment Of A Text Inside A Button With An Image

In this CodePen you can see a

Solution 1:

You can use the following solution using flexbox:

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
button {
  align-items: center;
  display: flex;
  padding: 3px;
  justify-content: center;
  width: 300px;
}
buttonimg {
  flex-shrink: 0;
  margin-right: 10px;
}

<button><imgsrc="https://lorempixel.com/50/50/"alt=""><span>Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span></button><button><imgsrc="https://lorempixel.com/50/50/"alt=""><span>Some Text</span></button><button><imgsrc="https://lorempixel.com/50/50/"alt=""></button>

Solution 2:

Try to do it like this way. There are other methods also, but this one is simple.

button {
  width: 300px;
}
buttonimg {
  float:left;
  width:20%;
}
buttonspan {
  float:right;
  width:80%;
}

<button><imgsrc="http://lorempixel.com/50/50/" /><span> Some Text some text some text some text some text some text some text some text</span></button>