html - Vertically align smaller bullets with larger text

Question

I have a list with bullets. I made the bullets smaller by putting the li text inside a span and making the font-size of the li smaller than that of the span. The problem is that now the bullets are not vertically aligned in relation to the text. How do I fix that?

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>

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>