Witam,
mam taki oto obrazek:


I teraz na nim chciałbym napisać wyśrodkowany tekst, będący liczbą komentarzy - to znaczy ma to wyglądać tak:


Jak to zrobić?

Kombinowałem z background-image, ale różne liczby mają różne długości - w związku z czym zazwyczaj tło obrazka ucieka do lewego górnego rogu, a liczba jest napisana na prawo od krańca obrazka.

Dziękuję za każdą pomoc i pozdrawiam

P.S. Zakładam, że liczba komentarzy będzie co najwyżej dwucyfrowa.

Padding.

Czym jest ta chmurka w kodzie? Samym np. pararafem z nadanym tłem? Osobnym kontenerem?
Gdy nadasz mu stałą szerokość, to text-align: center; powinien załatwić sprawę. Bez marginesów i dopełnień na boki.

A może zrobić to całkiem w CSS i nie przejmować się ewentualnymi wystawaniem komentarzy poza chmurkę?

[HTML] pobierz, plaintext 
.chmurka {
float: left;
width: auto;
height: 20px;
color: white;
padding: 0 10px;
background-color: #808080;
}
 
.chmurka .ogonek {
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
 
<div class="chmurka">3553453454<span class="ogonek"></span></div>
[HTML] pobierz, plaintext 

Rogi zaokrąglić też można.

WOW, świetne rozwiązanie. Nie spodziewałbym się.

@Kshyhoo
Nie wiem czy ze mnie drwisz czy nie zrozumiałem jakiegoś genialnego przesłania, więc jak nie chce Ci się napisać czegoś więcej niż jedno słowo to naprawdę lepiej nie pisz nic wcale.

Przecież Kshyhoo podał Ci dobre rozwiązanie- podstawy się kłaniają

Rozwiązanie nr1 - zrób taki obrazek żeby mieściły się na nim bez problemu liczby 3-cyfrowe.
Rozwiązanie nr2 - zamiast jednego obrazka, 3- czyli lewa, prawa, i środek, który dostosuje się do szerokości div'a.
Rozwiązanie nr3 - div ze stałym jednokolorowym tłem lub rozciągniętym na całą szerokość obrazkiem, ustaloną wysokością, i zaokrąglonymi rogami, a do niego "doklejony" pod spodem ogonek - czy to obrazkiem czy CCS'em.