Vertikal kleinere Kugeln mit größerem Text ausrichten

Question

Ich habe eine Liste mit Kugeln. Ich machte die Kugeln kleiner, indem ich den li Text innerhalb eines span setzte und die Schriftgröße des li kleiner als das der Spannweite machte. Das Problem ist, dass die Kugeln nicht mehr vertikal zum Text ausgerichtet sind. Wie repariere ich das?

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

Sie könnten einfach Ihren eigenen Aufzählungszeichen machen und es in die gewünschte Größe bringen.

li{ 
    font-size: 15px; 
    list-style-type:none; 

} 
li span{ 
    font-size: 25px; 
} 

ul li:before { 
    content: "•"; 
    font-size: 80%; 
    padding-right: 10px; 
} 

Wechseln Sie einfach um die font-size auf die gewünschte Größe.

jsFiddle

Answer 2

Try this:

li span{ 
    font-size: 25px; 
    vertical-align:middle; 
    padding-bottom:5px; 
} 

es Siehe hier: http://jsfiddle.net/tXzcA/19/

Answer 3

Dies ist, was ich verwendet, es beiden Zentren auf den Punkt & den Inhalt

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