修改

Question

所以我有一个<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垂直居中。

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

Answer 2

如果不使用重置样式表，例如Eric Meyers或Normalize.css，您的浏览器会自动添加默认样式。就我而言，镀铬为你的UL增加了40px。

我明确地将填充设置为20px并且它看起来不错，但是如果你可以节省头痛的话，我会实现一个重置样式表。

JsFiddle

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

Answer 3

你可以在li上使用背景图片而不是使用“+”更好运 - 这样你就可以定位“+”（作为背景图像），无论你喜欢什么。

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

Answer 4

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

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

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

Answer 5

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

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

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

希望也能帮助别人！

李中心：在用文字内容之前

CSS

修改

5 个答案:

资源