title: Trying to use an image and text inside a <button>
body: <p>Im trying to have a button with format like I have in my image 1.</p>
  
  <p>Where I have a div with background red at left, and inside this div I have an image, and I want this image aligned at center of my div.</p>
  
  <p>And then I have the text of my button at right of my red div.</p>
  
  <p><strong>Image 1:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/NHk0E.png" alt="enter image description here"></p>
  
  <p>But What Im having is this:</p>
  
  <p><strong>Image 2</strong></p>
  
  <p><img src="https://i.stack.imgur.com/iaCRM.png" alt="enter image description here"></p>
  
  <p>I dont have my image at center of my red div, and my button text is stucked in my div.</p>
  
  <p>Do you see what Im doing wrong?</p>
  
  <p>This is my fiddle with issue Im having: <a href="http://jsfiddle.net/nXuU2/2/" rel="noreferrer">http://jsfiddle.net/nXuU2/2/</a></p>
  
  <p>This is my html</p>
  
  <pre><code>&lt;button class="btn"&gt;               
      &lt;div id="btn_container"&gt;&lt;img  src="http://placehold.it/30x30" width="30" height="30"/&gt;&lt;/div&gt;
      &lt;span&gt;Button link 1&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>   .btn
  {
  
      position: relative;
      width: 200px;
      height: 60px;
      margin-bottom:20px;
      padding: 0 10px;
      text-align: left;
  
      font-size: 16px;
      color: #333;
      background:gray;
  }
  
  #btn_container
  {
      width:40px;
      height:40px; 
      border-radius:5px;
      background:red; 
      float:left;
  }
  
  .btn img 
  {  
      margin-right: 10px;
      vertical-align:middle;
  }
  
  
  .btn span
  {
      display:inline-block;
      width: 120px;
      vertical-align:middle;
  }
  </code></pre>