Css 如何将硬币前面的文字居中作为背景？

在这里，我想把硬币前面的数字居中。 谁来帮帮我

这是html文本，其中10应该有一个居中的金币作为背景：

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

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

---

一种方法是去掉

height

属性，只需添加一个

50px的填充

#pghomepage .goldcoinbg{
// Other styles

padding:50px;

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

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

尝试将“线高度”属性设置为2em或3em，然后设置垂直对齐：中间。这可能会奏效

所以应该是这样的：

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

公正的警告。。这是从内存中获取的，您必须自己尝试，但您应该拥有到达该位置所需的位。
HTML:

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

实时演示：
只需将
行高设置为div的高度。在本例中，添加：

line-height: 102px;

到
#pghomepage.goldcoinbg
将行高更改为包含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;

您应该在这里提供一些代码或示例。一旦你解决了这个问题，你的问题对其他任何人都没有价值，因为我们不知道你在说什么。@AgA我使用的不是
垂直对齐
属性，而是
行高
-只需将其设置为与
高度
属性相同的值。我向你的帮助精神致敬！
#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;