title: How to align an image at the bottom of li element?
body: <p>How to align an image at the bottom of li element. In my case I need the smile align with the bottom edge of the square.</p>
  
  <p><a href="http://jsfiddle.net/Jvgrz/" rel="nofollow">http://jsfiddle.net/Jvgrz/</a></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;a&lt;/li&gt;
          &lt;li&gt;b&lt;/li&gt;
          &lt;li&gt;&lt;img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  li {
      position: relative;
      width:100px;
      height:100px;
      border: 1px solid red;
  
  }
  </code></pre>