Question

我有一个包含子弹的列表。我通过将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 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;
}

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>

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

4 个答案: