Allineare verticalmente il testo accanto a un'immagine?

Perché non funziona vertical-align: middle? Eppure, vertical-align: top funziona.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
sodimel
Domanda modificata 7º agosto 2019 в 9:23
Programmazione
css vertical-alignment
28º gennaio 2009 в 9:01
17 visualizzazioni
Soluzione

In realtà, in questo caso è abbastanza semplice: applicare l'allineamento verticale all'immagine. Dal momento che è tutto in una riga, è davvero l'immagine che vuoi allineare, non il testo.


<div>

  <span style="">Works.</span>
</div>

Testato in FF3.

Ora puoi usare flexbox per questo tipo di layout.

.box {
   display: flex;
   align-items:center;
}
<div class="box">

    <span style="">Works.</span>
</div>
patelarpan
Risposta modificata 26º aprile 2018 в 12:58
Commentari (23)

Perché devi impostare la "line-height" all'altezza del div perché questo funzioni

Josh Crozier
Risposta modificata 17º ottobre 2013 в 9:40
Commentari (2)

Probabilmente vuoi questo:

<div>

   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Come altri hanno suggerito, prova vertical-align sull'immagine:

<div>

   <span>Didn't work.</span>
</div>

I CSS non sono fastidiosi. È solo che non leggi la documentazione. ;P

Commentari (3)