centering li:before content with text

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 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 1

vertical-align: text-bottom;

http://jsfiddle.net/2FZx6/4/

You don't want to have the + in the middle of your li, but on the same height as a lower-case letter. That's why you have to use text-bottom instead of middle. If you were to use letters with descenders (such as g or y) you would notice that the actual dots also aren't in the middle of the element/text, but on text-bottom or baseline.

(Actually, the default value baseline works pretty well.)

Resources

• MDN: vertical-align