居中 li: 在文本内容之前

Posted 2023-03-06

【中文标题】居中 li: 在文本内容之前

【英文标题】：centering li:before content with text

【发布时间】：2013-08-11 19:57:27

【问题描述】：

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

+ abc
+ 123
+ hello

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

这是小提琴的link。

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 垂直居中。

【问题讨论】：

为什么您的ul 显示为表格单元格？

padding-left:2.5em;

@BoltClock 我正在尝试我发现的不同的东西。当然，这没有用。

如果您内联显示它们，您不需要做任何特殊的事情来对齐它们，因为它们会自然地在实际内容后面流动。此外，display: inline 无论如何都是生成内容的默认值。您是否试图以不同的方式将它们置于中心位置？

【参考方案1】：

如果不使用Eric Meyers 或Normalize.css 等重置样式表，您的浏览器会自动添加默认样式。在我的例子中，chrome 为你的 UL 添加了 40px。

我明确地将内边距设置为 20 像素，看起来不错，但如果可以的话，我会实现一个重置样式表，以免以后头疼。

JsFiddle

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

【参考方案2】：

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

【讨论】：

完美。这正是我想要的。你是圣人。

等等。大写字母呢？

@irosenb：你的一个例子包括字符串“hello world”，它包含五个带升序的字母，因此大写字母根本不成问题。

嗯，这不是它在我的真实 html 中的实际样子。在我的实际情况中，所有lis 都是大写的。

【参考方案3】：

在你的 li 上使用背景图片而不是使用“+”可能会更好 - 这样你可以随意放置“+”（作为背景图片）。

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

【参考方案4】：

此方法为您提供了更多微调。

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

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

【参考方案5】：

可能不适用于所有人，但根据我的情况，我通过将 lineheight 添加到 li（文本）和 li:before（字体真棒图标）进行相应调整：

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

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

希望对其他人也有帮助！