[HTML] wyrównanie tekstu w elemencie będącym odnośnikiem

[sioux]

Witam
Na stronie chcę umieścić duże okrągłe butony (podgląd), na których ma znajdować się wyśrodkowany w pionie i poziomie tekst (o różnych stylach - wielkość, odstęp między liniami).

Kolor guzika zmienia się po najechaniu - cały obszar jest podlinkowany.
Jak mogę rozmieszczać na tym obszarze tekst?
Pierwotnie zrobiłem tak:

Kod:

<div class="but3">
        <a href="info.html" class="men">
                <div class="inbut">INFO</div>
                <div class="inb">o firmie,</div>
                <div>o projektach</div>
        </a>
</div>

no ale wiadomo - że wewnątrz <a> nie mogą to być div'y

klasa but3 to tylko rozmieszczenie na stronie, a "men" zrobiłem na zasadzie wyrównywania obrazka do góry i w dół (jeśli najedziemy myszką) żeby nie musiał się ładować po raz drugi:

Kod:

a.men{
        background:url('puzle/button.png') top;
        width:198px;
        height:198px;
        display:block;
        border: none;
        text-decoration:none;
        outline: none;
        color: black;

}

a.men:hover{
        background:url('puzle/button.png') bottom;
        color: black;
}

Wszystko fajnie działa no ale się nie waliduje
Nie chce dać tekstu jako obrazek (jako tło) więc jak to rozegrać ?

Z góry dzięki za odpowiedź. Proszę o łopatologiczne opisy bo jestem jak dziecko we mgle