title: How to vertically center align background image with text?
body: <p>I am having trouble vertically aligning background image with text, without assigning constant (and hence, not automatic and reusable) values to <code>height</code> or <code>line-height</code>. I was wondering if there actually is a way to vertically center align bg image of, say and <code>a</code> element<code>, with its text without assigning constant values to</code>line-height<code>or</code>height`?</p>
  
  <p>A live demo is available here: <a href="http://cssdesk.com/8Jsx2" rel="nofollow noreferrer">http://cssdesk.com/8Jsx2</a>.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;a class=""&gt;background-position: center&lt;/a&gt;
  &lt;a class="contain"&gt;background-size: contain&lt;/a&gt;
  &lt;a class="line-height"&gt;Constant line-height&lt;/a&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>a {
    display: block;
    margin: 10px;
    width: 200px;
    padding-left: 34px;
    font-size: 14px;  
  
    background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png');  
    background-repeat: no-repeat;
    background-position: 5px center;
  
    border: 1px solid black;
  }
  
  /* I don't want to use constant line-height */
  .line-height {
      line-height: 24px;
  }
  
  /* I don't want to use this, because I want my bg image's size to stay intact */
  .contain {
      background-size: contain;   
  }
  </code></pre>