Span allineato verticalmente rispetto a image

[pictor]

Sto cercando di creare un pulsante con immagine+testo, però non riesco ad allineare verticalmente il testo rispetto all'immagine.

<div id="CloseButton">
    <input type="image" src="[URL]" />
    
    <span>Chiudi</span>
</div>

#CloseButton {
    position:absolute;
    top: 2px;
    right: 2px;
    vertical-align: middle
}

#CloseButton input {
    border: 0;
}

Ho provato ad usare vertical-align, line-height, height e tutto un pò ma non riesco ad allineare lo span a metà dell'altezza dell'immagine/input.
Mi sta sempre allineato alla linea di base (bottom) dell'image.

Credo sia facilissimo ma mi sfugge il 'come'

Un suggerimento perfavore

Grazie

[ignorantone]

Sbagli l'applicazione della proprietà.

La proprietà Vertical-align non può essere applicata ad elementi blocco [come il div] ma va applicata a elementi inline.

In questo caso non lo devi applicare al div ma all'input.

^^

[pictor]

Mmmm forse intendi dire allo span (che è quello che non si allinea a metà dell'immagine), l'immagine occupa tutta l'altezza del div.

Ma applicando il vertical-align allo <span> non si sistema. Sta sempre alla base dell'immagine invece che a metà altezza

EDIT:

Risolto
C'era un float:left all'input che dava noia e lo trasformava in block
L'ho tolto e lo span si è allineato.

Ho effettivamente messo l'allineamento verticale all'input e mi ha influenzato lo span.

Non capisco bene il principio con cui è applicato... sembra che vada applicato all'elemento di riferimento per l'allineamento, piuttosto che all'elemento da allineare.

Come mai? C'è qualche reference dove trovare spiegazioni?

Grazie