使用文本居中li:before内容

Question

我有一个需要样式的 <ul>。我使用加号来设置样式。它看起来像这样：

+ abc
+ 123
+ hello

我遇到的问题是无法将“+”与实际的li居中对齐。也就是说，当我需要它们与li文本垂直对齐时，“+”略微偏离。有人知道我做错了什么吗？

这里是指向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 垂直居中。

- irosenb

---

为什么你的 ul 被显示成了表格单元格？ - BoltClock

padding-left:2.5em; - PiLHA

@BoltClock 我尝试了我找到的不同方法。当然，那些都没起作用。 - irosenb

如果您在内联显示它们时，不需要进行任何特殊对齐操作，因为它们会自然地流动到实际内容的后面。此外，display:inline本来就是生成内容的默认设置。您是否尝试以不同的方式将它们居中？ - BoltClock

Answer 1

vertical-align: text-bottom;

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

如果你不想让 + 出现在 li 的中间，而是与小写字母在同一高度上，那么就要使用 text-bottom，而不是 middle。如果你使用带有下行字符（例如 g 或 y）的字母，你会注意到实际的点也不在元素/文本的中心，而是在 text-bottom 或 baseline 上。

(事实上，默认值baseline非常有效。)

资源

• MDN：vertical-align

- Zeta

---

太完美了，这正是我想要的。你真是个圣人。 - irosenb

等一下。那大写字母呢？ - irosenb

@irosenb：你的一个例子包含了字符串“hello world”，其中有五个带有升高部分的字母，因此大写字母不应该是问题。 - Zeta

这并不是我的真实HTML代码的样子。在我的实际代码中，所有的li都是大写的。 - irosenb

Answer 2

如果没有使用重置样式表，例如Eric Meyers或Normalize.css，您的浏览器会自动添加默认样式。在我的情况下，Chrome会将40px添加到您的UL。

我明确将填充设置为20px，并且看起来很好，但是如果可以，请实施重置样式表以避免日后出现问题。

JsFiddle

ul {
    padding-left:20px;
    margin:0;
}

- Christopher Marshall

Answer 3

这个方法可以让你进行更精细的调整。

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

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

- ericjbasti

Answer 4

你可以尝试在li上使用背景图像，而不是使用"+"号，这样你可以将"+"（作为背景图像）定位到任何位置。

http://css.maxdesign.com.au/listutorial/master.htm

- Craig Ralston

Answer 5

可能不适用于所有人，但对于我的情况，我通过为 li（文本）和 li:before（字体图标）添加行高来进行相应调整：

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

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

希望这也能帮到其他人！

- Joel Balmer