2013-01-15 15 views
15

私は箇条書きのリストを持っています。私はの中にliのテキストを置き、liのfont-sizeをそのスパンのそれよりも小さくすることによって、弾を小さくしました。問題は、弾丸がテキストに対して垂直方向に整列していないことです。どうすれば修正できますか?小文字を大きなテキストに垂直に整列する

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/

答えて

5

あなたは自分の弾丸ポイントを作って、どんなサイズでも作ることができます。

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

+0

Altキー+ 0149または単にコピーして私のポストから貼り付けてください。 [altコード](http://symbolcodes.tlt.psu.edu/accents/codealt.html) – Jason

+0

'content:" \ 2022 "' – dmr

8

これを試してみてください:

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

はここでそれを参照してください。http://jsfiddle.net/tXzcA/19/

5

これは、コンテンツ

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

を使用したときにうまくいきました。私はアイコンフォントの使用が好きです。それは良いブラウザサポートを持っています(IE8 +でテスト済み)。 –

関連する問題