bgとしてコインの前にテキストの中央を揃える方法は？

Question

これでpage私はコインの前に数字を中央に配置したいと思います。 誰か助けてください。

これは10 BGとして中心金色のコインを持っているべきHTMLテキストである：

<div class="goldcoinbg">10</div> 

これは、数値テキストとBGとして黄金コインのCSSコードである：

#pghomepage .goldcoinbg { 
background: url(http://www.creditcardpaymentgateways.in/images/goldcoin.png) no-repeat center center; 
width: 100px; 
height: 102px; 
text-align: center; 
vertical-align: middle; 
color: yellow; 
font-size: 80px; 
font-weight: bold; 
margin: 1em 20% 5px 20%; 
} 

Answer 1

HTML：

<div class="coin">1</div> 

CSS：

div.coin { 
    background:url(http://www.creditcardpaymentgateways.in/images/goldcoin.png); 
    width:100px; 
    height:102px; 
    font-family:Arial; 
    font-size:70px; 
    font-weight:bold; 
    color:gold; 
    text-align:center; 
    line-height:102px; 
} 

ライブデモ：http://jsfiddle.net/CjeyW/2/

Answer 2

これを行う方法の1つは、heightのプロパティを取り除き、単に埋め込みを50pxに追加することです。

#pghomepage .goldcoinbg{ 
// Other styles 

padding:50px; 

// or to keep the coins in their current horizontal position: 

padding-top:50px; 
padding-bottom:50px; 
} 

Answer 3

line-heightプロパティを2emまたは3emに調整し、次に垂直方向の調整：中央を試してみてください。それはトリックを行う可能性があります。

ので、このようなものになるだろう：

.coin { 
    line-height: 2em; 
    vertical-alignment: middle; 
} 

公正警告。これは、メモリから、あなたはそれを自分で試してみてよされていますが、あなたがそこに取得する必要がありますビットを持っている必要があります。

Answer 4

ただのdivの高さにline-heightを設定します。この場合、追加：

line-height: 102px; 

~#pghomepage .goldcoinbgを追加します。

Answer 5

ラインハイトを含むdivの高さに変更します。あなたの場合：

#pghomepage .goldcoinbg { 
    background: url("http://www.creditcardpaymentgateways.in/images/goldcoin.png") no-repeat scroll center center transparent; 
    color: #FFFF00; 
    font-size: 80px; 
    font-weight: bold; 
    height: 102px; 
    margin: 1em 20% 5px; 
    text-align: center; 
    vertical-align: middle; 
    width: 100px; 
    line-height: 102px;