Align image and text in the middle of button element

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

While @paislee's solution works, it is not ideal. With the universal selector (*) being used, every element is checked against it (as CSS is matched right-to-left). A better solution, especially if all children elements are known, is to match the elements individually. Ergo, button > img, button > span is better than button > *.

button {
  padding: 1px 6px 1px 6px;
}

/* Add this to align vertically */
button > img,
button > span {
  vertical-align: middle;
}

<button>
  <img src="https://placehold.it/50x50" alt="Text" />
  <span>Text</span>
</button>