css - 在图像中居中数字( rails )

Question

我希望数字在我使用的图像中居中。目前，该数字仅作为一位数看起来不错，但在三位数时它会留下背景图像。

ruby :

 <%= image_tag("chat-bubble-icon.png", id: "comment_bubble") %> 
 <%= micropost.comments.count %>

CSS:

#comment_bubble {
  margin-left: 18px;
  margin-right: -20px;
}

解决办法是去掉图片标签，用css设置为comment.count的背景

Answer 1

像这样

.comment_count{
 background: bubble.png;
 height: 100px;
 line-height:100px;
 width: 100px;
 text-align:center;
}