title: using images inside <button> element
body: <p>I am trying to include an image and some text inside a button element.  My code is as follows:</p>
  
  <pre><code>&lt;button class="testButton1"&gt;&lt;img src="Car Blue.png" alt=""&gt;Car&lt;/button&gt;
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>.testButton1
  {
  font-size:100%;
  height:10%;
       width: 25%
  }
  
  .testButton1 img
  {
  height:80%;
  vertical-align:middle;
  }
  </code></pre>
  
  <p>What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right.  Using &amp;nbsp works, but is perhaps a bit crude.  I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.</p>
  
  <p>What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.</p>
  
  <p>Any help, as always, is appreciated.  Thank you.</p>