在一個圖像（導軌）中居中一個數字

我希望數字在IM圖像使用中居中。目前這個數字看起來只有一個數字，但是在三位數字時它會留下背景圖像。在一個圖像（導軌）中居中一個數字

enter image description here

紅寶石：

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

CSS：

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

解決辦法是去除圖像標籤，並使用CSS將其設置爲用於comment.count

背景

2013-02-21 Jaqx

如何將圖像中心的三位數字？你的形象很小。 – Ankit 2013-02-21 05:45:25

哈哈200符合完美只是檢查 – Jaqx 2013-02-21 05:47:38

行..然後有一個div有這個泡沫作爲背景應用。然後爲div設置文本對齊中心。設置行高等於div的高度。 – Ankit 2013-02-21 05:49:39

像這樣

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

2013-02-21 05:51:45 Ankit

我想你應該也加了修改過的html。 '

<%= micropost.comments.count %>

' – 2013-02-21 05:53:43

很難說沒有看到更多的CSS和生成的HTML。

但是，你應該能夠使用

margin:0 auto;

和刪除

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

2013-02-21 05:43:28

剩餘邊距是將圖像移動到我想要的位置。由於數字在右側，我使用負右邊距將其滑過氣泡。設置邊距0自動不會使文字居中。 – Jaqx 2013-02-21 05:46:00

好的。爲了弄清楚，需要查看更多的HTML，CSS。 – 2013-02-21 05:48:20

發佈小提琴可能會有所幫助。 – 2013-02-21 05:49:03

嘗試中心的數字：

#comment_bubble { 
    margin: auto; 
}

2013-02-21 05:50:54 shweta

回答