Question: So I have a `<ul>` that I need to style. I'm using +'s to style it. It looks like this: 

```
+ abc
+ 123
+ hello

```

The problem I'm having is that I'm not able to center the +'s with the actual `li`'s. As in, So the pluses are ever so slightly off, when I need them to vertically align with the `li` text. Anyone know what I'm doing wrong? 

Here's a [link](http://jsfiddle.net/2FZx6/1/) to the fiddle.

CSS
---

```
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;

}

```

Edit
====

Okay, I didn't mean align the `#content` with the other `ul`. I meant vertically center the `+` with the `abc`.

Answer: 
This method gives you a bit more fine tuning. 

<http://jsfiddle.net/2FZx6/9/>

```
li:before { // add these bits
    position: relative;
    top: -.2em ; // fine tune this however you want
}

```
Might not work for everyone but for my situation I adjust accordingly by adding lineheight to the `li` (text) and the `li:before` (font awesome icon):

```
li {
  /* li css */
  line-height: 16px;

li:before {
  /* li before css */
  line-height: 12px;
}

```

Hope that helps someone else too!