html - 居中 li :before content with text

Question

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

+ abc
+ 123
+ hello

我遇到的问题是我无法将 + 与实际的 li 对齐。的。如，所以当我需要它们与 li 垂直对齐时，这些优点会稍微偏离。文本。有人知道我在做什么错吗？

这是 link到 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;

}

编辑

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

Answer 1

vertical-align: text-bottom;

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

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

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

资源

• MDN:vertical-align