allineare testo e immagine

[supermac]

Scusate ma sto impazzendo:

<div style="clear:both;width:100%;text-align:center;line-height:60px;">
Disponibilità:
<div class="avail"></div>
</div>

Vorrei semplicemente far si che la scritta Disponibilità e il div con classe avail fossero sulla stessa riga e allineati al centro del div contenitore e invece il div mi va insistentemente a capo....cosa devo modificare?

Questa è la classe avail
.avail{
border:3px solid rgb(70, 140, 0);
border-radius: 15px;
height:30px;
width:30px;
margin:-5px 10px 0 10px;
background: #FFF url('/..../ok.fw.png') center center no-repeat;
background-size:80%;
}

[KillerWorm]

L'elemento div è un elemento di tipo blocco, cioè di default ha proprietà display:block. Una delle caratteristiche di tali elementi, se non sono state definite altre regole che lo fanno agire diversamente, i è quella di iniziare "a capo" dell'elemento che lo precede, non seguendo quindi il flusso del testo come invece accade per gli elementi inline (vedi <span> e altri elementi testuali) o inline-block (ad esempio <img>).

Puoi risolvere impostando, per quel div, il valore display come inline-block. Questo lo forzerà a seguire il flusso del testo e a sottostare alle relative regole (come text-align:center) proprio come se fosse un elemento <img>.

[supermac]

Grande! Grazie anche per la spiega, muy obrigado!