居中 li:before 内容与文本

Question

所以我有一个<ul>我需要设计的样式。我正在使用 + 来设计它。它看起来像这样：

+ abc
+ 123
+ hello

我遇到的问题是我无法将 + 与实际的li's居中。就像，所以当我需要它们与li文本垂直对齐时，加号会稍微偏离。有谁知道我做错了什么？

这是小提琴的链接。

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;

}

编辑

好吧，我的意思不是将#content与其他ul. 我的意思是将+与垂直居中abc。

Answer 1

vertical-align: text-bottom;

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

您不想将+放在 的中间li，而是与小写字母的高度相同。这就是为什么你必须使用text-bottom而不是middle. 如果您要使用带有降序的字母（例如g或y），您会注意到实际的点也不在元素/文本的中间，而是在text-bottom或 上baseline。

（实际上，默认值baseline效果很好。）

资源

• MDN： vertical-align