css - 画像内の数値を中央揃えにする (レール)

Question

使用している画像の中央に数字を配置したいと思います。現在、数値は 1 桁のように見えますが、3 桁になると背景画像が残ります。

ルビー:

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