come allineare verticalmente il testo accanto a un'immagine fluttuante?

Desidero allineare verticalmente un'estensione dopo un'immagine flottata. L'ho cercato nello stack overflow e ho trovato this post. ma la mia immagine è fluttuante.come allineare verticalmente il testo accanto a un'immagine fluttuante?

<div> 
    <img style="width:30px;height:30px; float:left"> 
    <span style="vertical-align:middle">Doesn't work.</span> 
</div>

Dare vertical-align:middle all'immagine e non cambia nulla!

Grazie

fonte

2012-05-09 Mosijava

Bene, sembra cambiare se si dà 'vertical-align: middle' all'immagine. L'ho provato su Chrome. – petrichor

Hai dimenticato un ';' nello 'stile' per il tuo' img' tra 'height' e' float'. – Maehler

@McFjodor Grazie, l'ho modificato – Mosijava

Prima rimuovere float da esso. Scrivere in questo modo:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg"> 
    <span>Doesn't work.</span>

Scegli questa http://jsfiddle.net/ws3Uf/

fonte

2012-05-09 12:40:56 sandeep

Uso il tuo approccio e rimuovo il mio float dalla mia immagine . Ma quando cambio '' contenuto in qualcosa che lungo 2 linee, la seconda riga va in fondo all'immagine Finalmente aggiungo 'display: inline-block' a' 'e funziona! Grazie – Mosijava

@Mosijava - L'utilizzo del blocco in linea non ha funzionato per me, mette semplicemente tutto sulla riga successiva. Hai un esempio di questo lavoro? – Nick

Questo non avrà lo stesso effetto di 'float' se il testo è abbastanza lungo da richiedere più righe. http://jsfiddle.net/9667cqun/ –

Un <span> è un elemento inline, prova ad aggiungere display:block a campata, darle la stessa altezza dell'immagine e altezza della linea da abbinare. Fluttalo anche a sinistra. Questo dovrebbe funzionare

fonte

2012-05-09 12:40:16 atmd

Non funziona per me – Mosijava

davvero ?, controlla http://jsbin.com/owiyuc/edit#html,live – atmd

È possibile modificare manualmente così

<div> 
    <img style="width:30px;height:30px float:left"> 
    <span style="float:left;padding-top:15px;">Will work.</span> 
</div>

Demo

Oppure si può utilizzare un table

fonte

2012-05-09 12:41:33

Aggiungi line-height (paridi immaginare altezza):

<div> 
    <img style="width:30px;height:30px; float:left"> 
    <span style="vertical-align:middle; line-height: 30px;">Works!</span> 
</div>

See example.

fonte

2012-05-09 12:46:04 ScottS

Cosa succede se lo span ha una lunghezza di 2 righe? – Mosijava

@ Mosijava: questa soluzione funziona solo per una singola riga di testo.Sono contento che la soluzione di sandeep abbia funzionato per te (ovviamente non hai avuto bisogno di "fluttuare" sull'immagine come suggerito dal tuo titolo). – ScottS

Si potrebbe fare la seguente:

div:after { 
     content:""; 
     clear:both; 
     display:block; 
    }

fonte

2013-11-07 18:57:01

Anche se questo è un estremamente vecchio post, è possibile ottenere ciò utilizzando Flexbox:

div { 
 
display: flex; 
 
align-items: center; 
 
}

<div> 
 
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" /> 
 
<span>Doesn't work.</span> 
 
</div>

JsFiddle example

fonte

2016-07-03 10:19:18

come allineare verticalmente il testo accanto a un'immagine fluttuante?

risposta

Problemi correlati