/ / Ako zosúladiť obrázok so spodnou časťou div? - html, css, twitter-bootstrap, css3

Ako zosúladiť obrázok so spodnou časťou div? - html, css, twitter-bootstrap, css3

Snažím sa zosúladiť obrázok na spodnej strane div prvok pomocou vertical-align,ale toto vertical-align nezdá sa, že funguje, obraz sa vôbec nepohybuje.

 <div class="row">
<div class="col-md-1">
<img src="/images/../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
</div>
<div class=col-md-11 >
<div  style="overflow:auto;height:300px"></div>
</div>
</div>

Používam triedy bootstrap pre zarovnanie.Je tam niečo, čo môže urobiť obraz div zarovnajte so spodnou časťou vonkajšej strany div? Ktorá prijíma height druhej div ktorý je 300px;.

odpovede:

7 pre odpoveď č. 1

Ak vás správne rozumiem, niečo také by malo urobiť trik:

.parent {
position: relative;
height: 300px;
}

.child {
position: absolute;
bottom: 0;
}

Tieto triedy môžete pridať do súborov DIV a IMG.

Vyzerá to, že materská div bude mať výšku 300 pixelov vzhľadom na výšku nastavenú na dieťa v priľahlej divine. Ak zadáte výšku rodiča, potom môžete absolútne umiestniť dieťa relatívna do veľkosti rodič.

Ak nenastavíte rodič ako pozíciu: relatívna, potom bude dieťa pozícia relatívne k niečomu inému (napríklad k stránke).

Vertikálne zarovnanie nebude fungovať, pretože IMG jeinline element a správanie, ktoré očakávate, je závislé od tabuľky. S inline elementmi je vertikálne zarovnanie relatívne k riadku a nie k nadradenému kontajneru, takže obrázok zarovnaný s textom by sedel v rôznych pozíciách vo vzťahu k danému riadok textu.

Nezabudnite skontrolovať dokumentáciu pre túto a ďalšie otázky, ktoré sú dobre vysvetlené na MDN.


3 pre odpoveď č. 2

Môžete použiť flexbox pre toto. Aplikovať nadradené štýly na DIV. Nevyžaduje žiaden ďalší štýl img

.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}

Tu je to, čo budete chcieť pridať, ak nemáte úlohu, ktorá pridá predpony pre maximálnu kompatibilitu.

.parent {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

V súčasnosti používa 97% používaných prehliadačov flex.