Question

What would be the best and easiest way to align text and image vertically in the middle of button. Example:

button {
  padding: 1px 6px 1px 6px;
}
button img {
  width: 22px;
  height: 22px;
}

<button>
  <img src="http://latvijas-universitates-matematikas-un-informatikas-instituts.atver.lv/images/msn-icon.gif" alt="Text" />
  <span>Text</span>
</button>

Answer 1

button{
    padding: 5px 6px 5px 30px;
    background: url('http://latvijas-universitates-matematikas-un-informatikas-instituts.atver.lv/images/msn-icon.gif') no-repeat 5px center;
}