/ / Jak wyrównać obraz do dolnej części elementu div? - html, css, twitter-bootstrap, css3

Jak wyrównać obraz do dołu div? - html, css, twitter-bootstrap, css3

Próbuję wyrównać obraz do dołu div element za pomocą vertical-align,ale to vertical-align nie wydaje się działać, obraz wcale się nie porusza.

 <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>

Używam klas ładowania do wyrównania, czy jest coś, co może zrobić obraz div wyrównać do dolnej części zewnętrznej div? Który bierze height drugiego div który jest 300px;.

Odpowiedzi:

7 dla odpowiedzi № 1

Jeśli rozumiem cię poprawnie, coś takiego powinno załatwić sprawę:

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

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

Możesz dodać te klasy odpowiednio do DIV i IMG.

Wygląda na to, że div rodzica będzie wyższy o 300 pikseli niż ze względu na wysokość ustawioną na dziecku w sąsiednim dziale div. Jeśli zamiast tego podasz wysokość elementu nadrzędnego, możesz absolutnie pozycjonować dziecko krewny do wielkości rodzic.

Jeśli nie ustawisz rodzica jako position: relative, to dziecko będzie miało pozycję względem czegoś innego (np. Strony).

Wyrównanie w pionie nie działa, ponieważ IMG jestelement inline, a zachowanie, którego oczekuje się, zależy od komórki tabeli. W przypadku elementów śródliniowych wyrównanie w pionie odnosi się do linii, a nie do kontenera nadrzędnego, dzięki czemu obraz wyrównany z tekstem może znajdować się w różnych pozycjach względem danego linia tekstu.

Koniecznie sprawdź dokumentację tego i innych pytań dobrze wyjaśnione na MDN.


3 dla odpowiedzi № 2

Możesz użyć Flexbox do tego. Stosowanie stylów rodzica do DIV. Nie wymaga dodatkowej stylizacji img

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

Oto, co będziesz chciał dodać, jeśli nie masz narzędzia do dodawania prefiksów dla maksymalnej kompatybilności.

.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;
}

Obecnie 97% używanych dzisiaj przeglądarek obsługuje technologię flex.