在一个图像（导轨）中居中一个数字

我希望数字在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

回答