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

Question

我有一个子弹列表.我通过将li文本放在a中span并使字体大小li小于span 的字体来减小子弹.问题是现在子弹与文本没有垂直对齐.我该如何解决这个问题？

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 span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

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

Answer 2

你可以制作自己的子弹点并制作你想要的任何尺寸.

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