centering li:before content with text
css, css-selectors, html, html-lists
Solution
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`
Problem
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`.