CSS: Wycentrowanie zdjęcia w pionie

Czwartek, 25.07.2013

Załóżmy, że mamy zdjęcia wyświetlające się obok siebie w jednej linii. Zdjęcia te mają ustaloną wielkość w pikselach, ale mogą być poziome i pionowe. Jak zrobić, żeby wycentrować zdjęcie w pionie względem elementu nadrzędnego?

Potrzebne są nam do tego przede wszystkim trzy style: vertical-align, display i width. Zdjęcia muszą znajdować się w oddzielnych elementach np.: <div>. <div><img src="foto.jpg" /></div> Elementy te powinny mieć określoną wysokość i szerokość. div {width: 200px; height: 200px;} Aby wycentrować zdjęcie w pionie, do powyższego stylu dodajemy:

vertical-align: middle;
display: table-cell;

Zostaje nam już tylko dodać centrowanie w poziomie i gotowe. text-align: center; Musimy pamiętać, że jeśli element div znajduje się wewnątrz innego elementu i nadamy mu styl display: table-cell; wówczas nasz div będzie miał szerokość tylko taką jak jego zawartość. Dlatego należy pamiętać o definiowaniu szerokości tego elementu. Wycentrowanie zdjęcia w pionie

Poniżej cały styl jaki nam potrzebny.

div {
width: 200px;
height: 200px;
vertical-align: middle;
display: table-cell;
text-align: center;
}

Zobacz też:

Osadzanie CSS w dokumencie HTML5CSS: Jak zrobić wcięcie pierwszego wiersza w akapicie?CSS: zaokrąglona ramkaCSS: style dla elementu <hr>