Vertikaliai sulygiuoti tekstą šalia paveikslėlio?

Kodėl neveikia vertical-align: middle? Tačiau vertical-align: top veikia.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
sodimel
Redaguotas klausimas priešpietr rugpjūtis 2019 в 9:23
Programavimas
css vertical-alignment
popietr sausis 2009 в 9:01
19 peržiūros
Sprendimas

Tiesą sakant, šiuo atveju tai labai paprasta: paveikslėliui pritaikykite vertikalų išlyginimą. Kadangi viskas vienoje eilutėje, iš tiesų norite sulygiuoti vaizdą, o ne tekstą.


<div>

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

Išbandyta FF3.

Dabar tokio tipo išdėstymui galite naudoti flexbox.

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

    <span style="">Works.</span>
</div>
patelarpan
Redaguotas atsakymas popietr balandis 2018 в 12:58
Komentarai (23)

Kad tai veiktų, turite nustatyti line-height pagal div aukštį.

Josh Crozier
Redaguotas atsakymas popietr spalis 2013 в 9:40
Komentarai (2)

Tikriausiai norite to:

<div>

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

Kaip siūlė kiti, pabandykite paveikslėlyje naudoti vertical-align:

<div>

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

CSS nėra erzinantis. Jūs tiesiog neskaitote dokumentacijos. ;P

Komentarai (3)