Wyrównywanie, wyśrodkowywanie pionowe obrazków
Dziś rzecz prosta, jak ustawić obrazki w rządku, gdy wstwimy 3 obrazki, tu celowo różnej wysokości, ustawią się obok siebie równając dołem, czyli wyrównanie wertykalne obrazków.
Text Test
A jak zrobić by wyrównać górą? Poniżej to wyszło, gdy dałem w stylach dla IMG
img{float: left;}
Text Test
Kiedyś w dawnych czasach istniało coś takiego jak wyrównanie wertykalne VALIGN, dziś zastąpione przez styl CSS VERTICAL-ALIGN
img{vertical-align: top; }
Text Test
Jak da sie górą, da się dołem, to przetestujmy pośrodku, a przy pomocy MARGIN możemy wpłynąć na odstępy między nimi.
img{vertical-align: middle; margin: auto 10px; }
Text Test
I niech żyje chaos, obrazki w „przypadkowym położeniu ”dzięki nadaniu kazdenu obrazkowi innej cechy CLASS (aaa, bbb, ccc) a potem nadaniu kazdemu z nich różnej wartości dla marginesu dolnego. np można by
.aaa {margin: 0 0 15px 0}
Text Test
Proszę zwrócić jeszcze uwagę na margines między obrazkiem, a DIVem w którym jest zawarty. Przy zastosowaniu FLOAT i VERTICAL-ALIGN margines znika, przy zwyczajnym wstawieniu widać go. (najwyraźniej w 1 przykładzie) Ten margines może być czasem przyczyną frustracji, gdy nie wiemy dlaczego 2 obrazki (wyżej-niżej) nie chcą do siebie przylegać.
I już zupełnie obok tematu. Środkowy obrazek jest formatu GIF i część jego powierzchni jest przeźroczystością. Możemy więc wpływać na tą część nadając jej dowolny kolor np.:
background-color:#dde