Witam,
mam następujący problem.
Mam diva, jakiś rozmiarów, dajmy na to 200x200. Umieszczam w nim img o mniejszych wymiarach. Za pomocą jakich parametrów mogę umieścić ten obrazek tak, żeby był na dole diva, a nie u góry? Rozwiązanie typu margin-top dla konkretnych wartości odpadają ponieważ obrazek będzie losowany, i może być różnych wymiarów.
pozdrawiam
Antek
Z tego co wiem vertical-align nie jest zbyt dobrze obsługiwany przez przeglądarki więc może left i top po uprzednim ustawienu position na absolute (relative)... Spróbuj tego.
vertical-align jest wspierane całkiem nieźle, ale służy zwykle do czegoś innego. Wyrównuje elementy generujące ramkę wierszową (inline) względem danego wiersza. Jeśli wiersz w tym divie ma np. 20 pikseli wysokości, to vertical-align: bottom wyrówna obrazek do dołu, ale tylko do dołu tego wiersza, czyli nie dalej niż to 20px. Albo będzie inaczej: obrazek będzie wyższy niż normalnie wiersz by był i ramka wiersza zostanie rozciągnięta w pionie, a obrazek wyląduje na jej dole. W sumie może to wyglądać tak, jakby vertical-align nic nie dało.
Trzeba rozpatrywać każdy przypadek z osobna. position: relative to zły pomysł. position: absolute oraz left i top to też zły pomysł. Oba te rozwiązania nie zapewniają elastyczności niezbędnej gdy obrazek może mieć różną wysokość (a autor wspomniał, że tak właśnie jest).
Jedno z właściwych rozwiązań to ustawienie obrazkowi position: absolute oraz bottom: 0 (należy pamiętać, by element zawierający -- czyli ten div -- otrzymał position: relative).
Jeśli w elemencie zawierającym ma nie być żadnego tekstu, to można nawet się przehackować się z tym vertical-align: bottom. Trzeba jednak wtedy ustawić elementowi zawierającemu (divowi) line-height: 200px. Wtedy cały div jest jednym wielkim wierszem, a obrazek zostanie wyrównany do jego dolnej krawędzi. Naturalnie, może to wyglądać idiotycznie jeśli w divie oprócz obrazka jest jakiś tekst (bo tekst będzie wyświetlany w liniach o wysokości 200px; w przypadku pojedynczej linii tekst będzie wyglądał na wyśrodkowany w pionie).
Proponuję więc kombinację position: absolute i bottom: 0 dla obrazka, plus position: relative dla diva.
ponieważ w tym divie nie ma być tekstu, line-height i vertical-align poradziły sobie doskonale :) dziękuję bardzo :)
ale mam jeszcze jedno pytanie z ciekawości. Przy użyciu tego drugiego sposobu bottom: 0, position: absolute oczywiście zadziałało jak należy, tylko przy użyciu tego miałem problem z wyśrodkowaniem obrazka. Jak można to zrobić przy tym sposobie?
margin: auto;
a w nadrzędnym kontenerze:
text-align: center;
@aurel:
Zła odpowiedź dla tego konkretnego przypadku (ogólnie sposób z margin: 0 auto jest dobry).
Tutaj jest mowa o elementach pozycjonowanych bezwzględnie. Sztuczka z marginesami (plus text-align dla starych IE) na takie elementy nie ma wpływu, mimo że tak dobrze sprawdza się w przypadku elementów blokowych w normalnym przepływie w dokumencie.
@antek11:
Radzę to olać i zostawić tak jak masz. Bo w tej sytuacji nie jest to właściwe rozwiązanie. Gdybyś znał szerokość obrazków, to dałoby się to zrobić nawet nie znając szerokości elementu zawierającego. Ale rozumiem, że szerokości obrazków nie znasz.
Mógłbyś przeforsować sztuczkę, o której wspomniał @aurel. Jednak ona sama w sobie nie zadziała. Musiałbyś otoczyć obrazek dodatkowym elementem. To ten element mógłbyś pozycjonować bezwzględnie, a umieszczony w nim obrazek (mający display: block) wyśrodkowałbyś w poziomie za pomocą poziomych marginesów ustawionych na auto.
Jak widzisz, w tym wypadku więcej z tym zachodu niż z zastosowaniem tych przerośniętych wierszy i vertical-align. Na wiersze działa zwykłe text-align: center. Dlatego w tym kontekście wybrałeś właściwy sposób.