CSS 将较小的项目符号与较大的文本垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14342788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically align smaller bullets with larger text
提问by dmr
I have a list with bullets. I made the bullets smaller by putting the litext inside a spanand making the font-size of the lismaller 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?
我有一个包含子弹的列表。我通过将li文本放在 a 中span并使项目符号的字体大小li小于跨度的字体大小来使项目符号变小。问题是现在项目符号没有相对于文本垂直对齐。我该如何解决？
HTML:
HTML：
<ul>
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>text4</span></li>
</ul>
CSS:
CSS：
li{
font-size: 15px;
}
li span{
font-size: 25px;
}
jsFiddle: http://jsfiddle.net/tXzcA/
jsFiddle：http: //jsfiddle.net/tXzcA/
采纳答案by Jason
You could just make your own bullet point and make it whatever size you want.
您可以制作自己的项目符号并使其成为您想要的任何尺寸。
li{
font-size: 15px;
list-style-type:none;
}
li span{
font-size: 25px;
}
ul li:before {
content: "?";
font-size: 80%;
padding-right: 10px;
}
Just change around the font-sizeto the size you want.
只需将 更改font-size为您想要的大小即可。
回答by Brian Salta
Try this:
尝试这个：
li span{
font-size: 25px;
vertical-align:middle;
padding-bottom:5px;
}
See it here: http://jsfiddle.net/tXzcA/19/
在这里看到它：http: //jsfiddle.net/tXzcA/19/
回答by MartinC
This is what I used, it centers on both the bullet & the content
这是我使用的，它以项目符号和内容为中心
Jsfiddle: http://jsfiddle.net/VR2hP/14/
jsfiddle：http: //jsfiddle.net/VR2hP/14/
CSS:
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;
}
回答by luenib
Use an unordered list and display the list items as tables.
使用无序列表并将列表项显示为表格。
Take a look at this example: https://jsfiddle.net/luenib/jw1ua38v/
看看这个例子：https: //jsfiddle.net/luenib/jw1ua38v/
The icon, number, or whatever you want to place is going to be located inside a span. The content of the span is centered horizontally and vertically, very useful if you don't want to display your icon on the top. The text inside the paragraph will keep a space to its left, so it won't go under the icon in case the text extends in more than one line.
图标、数字或您想要放置的任何内容都将位于跨度内。跨度的内容水平和垂直居中，如果您不想在顶部显示图标，这非常有用。段落内的文本将在其左侧保留一个空格，因此如果文本扩展超过一行，它将不会位于图标下方。
CSS:
CSS：
ul {
padding-left: 0;
}
li {
display: table;
}
li span {
width: 40px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
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>
