垂直对齐小型枪弹较大的文本(Vertically align smaller bullets wit

我有子弹的列表。 我通过将制造子弹小li一中的文本span和制作的字体大小li比跨度较小。 问题是，现在的子弹不是垂直相对于文本对齐。 我该如何解决呢？

HTML：

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

CSS：

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

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

Answer 1:

你可以只让自己的子弹点，并使其任何你想要的大小。

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

Answer 2:

试试这个：

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

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

Answer 3:

这是我用过的东西，它集中在两个子弹及内容

的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;
}

Answer 4:

使用一个无序列表和显示列表项目表。

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

无论你要放置图标，数字，或将被定位跨度内。 如果你不想在上面显示你的图标跨度的内容，水平，垂直居中，是非常有用的。 段落内的文本将保持一个空间，它的左边，这样就不会在案件中的文本超过一个线延伸的图标下去。

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>

文章来源: Vertically align smaller bullets with larger text