将较小的项目符号与较大的文本垂直对齐答案

【问题标题】：Vertically align smaller bullets with larger text将较小的项目符号与较大的文本垂直对齐
【发布时间】：2012-12-29 20:23:47
【问题描述】：

我有一个带有项目符号的列表。我通过将li 文本放在span 中并使li 的字体大小小于跨度的字体大小来使项目符号更小。问题是现在项目符号没有相对于文本垂直对齐。我该如何解决？

jsFiddle：http://jsfiddle.net/tXzcA/

li {
  font-size: 15px;
}

li span {
  font-size: 25px;
}

<ul>
  <li><span>text1</span></li>
  <li><span>text2</span></li>
  <li><span>text3</span></li>
  <li><span>text4</span></li>
</ul>

【问题讨论】：

标签： html css list vertical-alignment

【解决方案1】：

这是我使用的，它以项目符号和内容为中心

Jsfiddle：http://jsfiddle.net/VR2hP/14/

CSS：

ul {
  padding-left: 5em;
  list-style: none;
}

li.twitter::before,
li.fb::before {    
  font-family: 'FontAwesome';
  margin: 0 .2em 0 -1.5em;
  font-size: 3em;
  vertical-align: middle;
}

li.twitter::before {
  content: '\f081';
}

li.fb::before {
    content: '\f082';
}

li {
  list-style-type: none;
}

li span {
  display: inline-block;
  vertical-align: middle;
}

【讨论】：

很好的答案，我喜欢图标字体的使用，并且它有很好的浏览器支持（在 IE8+ 中测试）。

【解决方案2】：

使用无序列表并将列表项显示为表格。

看看这个例子：https://jsfiddle.net/luenib/jw1ua38v/

图标、数字或您想要放置的任何内容都将位于跨度内。 span 的内容水平和垂直居中，如果您不想在顶部显示图标，这非常有用。段落内的文本将在其左侧保留一个空格，因此如果文本超过一行，它就不会位于图标下方。

CSS：

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML：

<ul>
  <li><span>1</span>
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
  </li>
  <li><span>2</span>
    <p>Some text here. Some text here. Some text here.</p>
  </li>
</ul>

【讨论】：

【解决方案3】：

您可以创建自己的要点，并使其成为您想要的任何大小。

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

只需将font-size 更改为您想要的大小即可。

jsFiddle

【讨论】：

Alt+0149 或者只是从我的帖子中复制并粘贴它。 Alt codes

【解决方案4】：

试试这个：

li span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

在这里查看：http://jsfiddle.net/tXzcA/19/

【讨论】：