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

我有一张子弹清单。我将

li

文本放在

span

中，使

li

的字体大小小于span的字体大小，从而使项目符号变小。问题是，现在项目符号没有与文本垂直对齐。我该如何解决这个问题

jsFiddle：

li{
字体大小：15px；
}
李斯潘{
字体大小：25px；
}

文本1
文本2
文本3
文本4

试试这个：

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

---

请看这里：

您可以自己制作子弹头，任意大小

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

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

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

只需将

字体大小更改为所需大小

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

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

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

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

Jsfiddle：

CSS:

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

看看这个例子：

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

CSS:

HTML:


一,
这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字


二,
这里有一些文字。这里有一些文字。这里有一些文字



Alt+0149，或者从我的帖子中复制并粘贴它。回答得很好，我喜欢使用图标字体，而且它有很好的浏览器支持（在IE8+中测试）。
ul {
  padding-left: 0;
}

li {
  display: table;
}

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

<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>