2016-05-04 23 views
4

私はイオンのアプリに取り組んでいると私は、丸みを帯びた領域におけるいくつかのinfoを表示していますが、私は第2の領域にハートのアイコンに番号を配置する必要があります。私はそれらを縦と横に整列させる必要があり、その数は心の中のように見える。私はいくつかのことを試してきましたが、一気に達成することはできません。どうやってやるの?ありがとう。CSS:どのようにアイコン内のテキストを配置するには?

:テキストは動的で、それを0%とすることができる割合だ100%

これは、その領域のコード

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/> 
 
<div class="post-info"> 
 
    <span class="charity"> 
 
    <i class="ion-ios-heart-outline"></i><span style="font-size: 13px">45</span> 
 
    </span> 
 
</div>

答えて

-1

あなたができることですテキストをアイコンに入れません。アイコンをdivの背景イメージにします。その後、divの中に数字を入れてください。

0

あなたが一桁が中央だけでなく、二つの数、すなわち値に基づいて、その

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/> 
 
<div class="post-info"> 
 
    <span class="charity"> 
 
     <span style="font-size: 13px;position:absolute;text-align:center;width:26px;padding-top:3px">55</span> 
 
     <i style="font-size:30px" class="ion-ios-heart-outline"></i> 
 
    </span> 
 
</div>

0

センターテキスト、のような何かを行うことができます。 あなたが使用して、アイコンの上に数の絶対位置をすることができます「位置:絶対に;」 また、あなたがそれを中央にCSS/JavaScriptの/ jqueryのを使用することができ 'トップ:XXpx;左:XXpx;' jsfiddleはすぐに従うこと。

JSFiddle

.charity > .inner-num { 
    position:absolute; 
    left:10px; 
    top:10px; 
    width:20px; 
    text-align:center; 
} 
1

あなたはアイコンの位置relativeを設定し、私はこの答えを愛し

https://jsfiddle.net/Ljquqtrv/

+0

マン絶対位置と:before peseudoにテキストを置くことによって、テキストのコンテナとしてのアイコンを作ることができますテキストは動的です。 :( –

+0

私はそのための解決策を見つけることを試みるだろう。 –

関連する問題