Justere tekst vertikalt ved siden av et bilde?

Hvorfor fungerer ikke vertical-align: middle? Og likevel fungerer vertical-align: top.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
sodimel
Redigerte spørsmål 7. august 2019 в 9:23
Programmering
css vertical-alignment
28. januar 2009 в 9:01
5 visninger
Løsning

I dette tilfellet er det faktisk ganske enkelt: bruk den vertikale justeringen på bildet. Siden alt er på én linje, er det egentlig bildet du vil justere, ikke teksten.


<div>

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

Testet i FF3.

Nå kan du bruke flexbox for denne typen layout.

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

    <span style="">Works.</span>
</div>
patelarpan
Redigert svar 26. april 2018 в 12:58
Kommentarer (23)

Fordi du må sette line-height til høyden på div for at dette skal fungere

Josh Crozier
Redigert svar 17. oktober 2013 в 9:40
Kommentarer (2)

Du vil sannsynligvis ha dette:

<div>

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

Som andre har foreslått, prøv vertical-align på bildet:

<div>

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

CSS er ikke irriterende. Du bare ikke lese dokumentasjonen ;P

Kommentarer (3)