title: Adding an image to the end of a <li> with text, centering the image vertically with the text
body: <p>I don't use CSS that often so every time I use it I have to experiment again and figure things by trial and error.</p>
  
  <p>What I'm trying to do is place <code>icon_32</code> in the same line as: "I made this." The image is 32px high so I wanted to move it down a bit to center it with the line.</p>
  
  <p>After experimenting a bit I found a solution that works on Safari and Chrome but doesn't work in Firefox.</p>
  
  <p>Here's what I'm doing:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul, li {
      /* spacing */
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      /* list */
      list-style: none;
  }
  
  #work_list li {
      display: block;
      /* spacing */ 
      margin-bottom: 10px;
  }
  
  #work_list .icon_32 {
      display: inline-block;
      position: absolute; /* This doesn't work in Firefox. */
      cursor: pointer;
      /* spacing */
      margin-top: -8px;
      margin-left: 8px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="work_list"&gt;
      &lt;li&gt; I made this. &lt;div class="icon_32"&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;I write, sometimes.&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Because one can't add a <code>padding-top</code> to inline elements, I made the icon's position absolute. The problem with just having it absolute is that I have to manually set the <code>margin-left</code> because the icon doesn't move to the left automatically with the text. By setting <code>display</code> to <code>block</code> on the  <code>&lt;li&gt;</code> and <code>display</code> to <code>inline-block</code> on the icon, what I was trying to achieve worked (although I don't fully understand why). This however, doesn't work in Firefox (and I haven't even tested in IE yet).</p>
  
  <p>Is there a proper way to achieve what I'm truing to do that works correctly on all browsers?</p>
  
  <hr>
  
  <p><strong>Update:</strong> How I ended up solving this by using the suggestions from the answers. Thanks a lot for the help!</p>
  
  <p>I didn't want to use <code>line-height</code> because I wanted to preserve the original height of the <code>li</code>. I just got rid of the unnecessary <code>position: absolute</code> and added <code>vertical-align: middle</code>. After doing so, the image was still affecting the height of the <code>li</code>, so I just added an id to the affected <code>li</code> and overwrote the <code>margin-bottom</code> so the sum of its height + bottom margin would equal the sum from the <code>li</code> without the 32px image.</p>
  
  <p>This is how it ended up being:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul, li {
      /* spacing */
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      /* list */
      list-style: none;
  }
  
  #work_list li {
      display: block;
      /* spacing */ 
      margin-bottom: 10px;
  }
  
  #work_list #work_item_icon {
      margin-bottom: 3px;
  }
  
  #work_list span.icon_32 {
      display: inline-block;
      cursor: pointer;
      /* spacing */
      vertical-align: middle;
      margin-top: -8px;
      margin-left: 8px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="work_list"&gt;
      &lt;li id="work_item_icon"&gt;I made this. &lt;span class="icon_32"&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="work_item_writing"&gt;I write, sometimes.&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>