將較小的子彈與較大的文字垂直對齊

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