css - 在图像中居中数字（导轨）

Question

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

红宝石：

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

Answer 2

如果没有看到更多的 CSS 和生成的 HTML，很难说清楚。

但是，您应该能够使用

margin:0 auto;

并删除

margin-left: 18px;
margin-right: -20px;

Answer 3

尝试：

#comment_bubble {
  margin: auto;
}