html - Align vertically an image and two lines of text -

i read many articles, many posts here, unfortunately can't center 2 lines of text , image vertically.

<a class="button" href="">     <img src="http://dummyimage.com/30x30/cf97cf/fff">     button     <span>button alt</span> </a> 

i 2 lines next image (centered), , center whole content vertically in .button.

body {     padding: 20px; }  .button {     background: #000;     color: #fff;     text-decoration: none;     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px;     height: 120px;     padding: 30px 50px;     display: inline-block; }  span {     font-size: 11px;     color: #ccc;     display: block; }  img {     vertical-align: middle; } 

at css-tricks found article, don't want use position:absolute center. there clean way center texts/image in <a>?

jsfiddle: http://jsfiddle.net/7fx3eozd/

you can wrap text , span inside div wrap div , img inside div add these classes:

also add display: inline-block; on img

    .center {          position: relative;       top: 50%;       transform: translatey(-50%);      }    .btntext {       vertical-align: middle;        display: inline-block;     } 

jsfiddle demo

---

body {      padding: 20px;  }    .button {      background: #000;      color: #fff;      text-decoration: none;      -webkit-border-radius: 5px;      -moz-border-radius: 5px;      border-radius: 5px;      height: 120px;      padding: 30px 50px;      display: inline-block;  }  span {    font-size: 11px;    color: #ccc;;    display: block;   }  img {    vertical-align: middle;     display: inline-block;  }  .center {      position: relative;    top: 50%;    transform: translatey(-50%);   }     .btntext {    vertical-align: middle;     display: inline-block;  }

<a class="button" href="">    <div class="center">        <img src="http://dummyimage.com/30x30/cf97cf/fff">        <div class="btntext">          button            <span>button alt</span>        </div>    </div>  </a>