title: centering li:before content with text
body: <p>So I have a <code>&lt;ul&gt;</code> that I need to style. I'm using +'s to style it. It looks like this: </p>
  
  <pre><code>+ abc
  + 123
  + hello
  </code></pre>
  
  <p>The problem I'm having is that I'm not able to center the +'s with the actual <code>li</code>'s. As in, So the pluses are ever so slightly off, when I need them to vertically align with the <code>li</code> text. Anyone know what I'm doing wrong? </p>
  
  <p>Here's a <a href="http://jsfiddle.net/2FZx6/1/" rel="nofollow">link</a> to the fiddle.</p>
  
  <h2>CSS</h2>
  
  <pre><code>ul {
      list-style: none;
      display: table-cell;
      padding: 0;
      margin: 0;
  }
  
  li {
      padding-left: 1em;
      text-indent: -1em;
  }
  
  li:before {
      content: "+";
      padding-right: 5px;
      vertical-align: middle;
      display: inline;
      padding-top: 0;
      margin-bottom: .5em;
  
  }
  </code></pre>
  
  <h1>Edit</h1>
  
  <p>Okay, I didn't mean align the <code>#content</code> with the other <code>ul</code>. I meant vertically center the <code>+</code> with the <code>abc</code>. </p>