Wyśrodkowanie pionowe i poziome w div

pytanie zadane 22 lipca 2016 w HTML i CSS przez lalanablanalala Bywalec (2,090 p.)

Chciałbym się dowiedzieć w jaki sposób mogę wyśrodkować pionowo zdjęcia w div żebym nie musiał do nich przypisywać margin-top i tak samo tytuł strony, do którego musiałem dodać line-height: 130px; . W tabelach wystarczy użyć kodu vertical-align:middle; jednak on w div nie działa... Nie używałem wcześniej divów

Link do strony http://szczurownia.cba.pl/home.html

Może znacie jakieś jakiś dobry ilustracyjny kurs z divami ?

3 odpowiedzi

odpowiedź 22 lipca 2016 przez Eimens Maniak (69,240 p.)
wybrane 28 lipca 2016 przez lalanablanalala

Najlepsza

Możesz to zrobić za pomocą flexbox'a. Link podsyłam tutaj!

Warto się z tym zapoznać. Inaczej zostaje tylko manewrowanie paddingiem i marginesem czego chciałeś uniknąć.

komentarz 22 lipca 2016 przez mitelak Pasjonat (23,330 p.)

Nie tylko :D Jeszcze mamy pozycje absolutną :)

komentarz 22 lipca 2016 przez Eimens Maniak (69,240 p.)

To też jest liczenie co do piksela...

komentarz 23 lipca 2016 przez mitelak Pasjonat (23,330 p.)

Ale przecież są % (które można też zastosować w sumie do margin)

odpowiedź 22 lipca 2016 przez xmentor Nałogowiec (49,520 p.)

odpowiedź 22 lipca 2016 przez CzikaCarry Szeryf (75,340 p.)

Jest jeden prosty trick aby wyśrodkować cokolwiek w pionie/poziomie. Dla zdjęcia dajesz

position: absolute;

następnie:

top: 50%;

i margin-top równy połowie wysokości*-1, czyli jeśli mamy obrazek o wysokości 300px to margin-top ustawimy na -150px

margin-top: -150px;

Ogólnie polecam flexboxa, ale jeśli musisz coś zrobić na szybko to ten sposób wystarczy.

komentarz 22 lipca 2016 przez mitelak Pasjonat (23,330 p.)

A jeżeli nie wiemy jaką wysokość ma jakiś element, albo mają one różne wysokości zamiast margin-top możemy użyć transform: translateY(-50%) ;)

komentarz 28 lipca 2016 przez lalanablanalala Bywalec (2,090 p.)

zdjęcia po najechaniu zwiększają wielkość także to odpada :P

komentarz 28 lipca 2016 przez CzikaCarry Szeryf (75,340 p.)

Dlaczego odpada? Jeśli na hoverze zwiększasz je 1.2 raza to na hoverze margin zwiększasz 1.2 raza lol... :D

komentarz 28 lipca 2016 przez lalanablanalala Bywalec (2,090 p.)

ja rozumiem że da się na hoverze, jednak chcę uprościć kod :D I teraz bawię się tym flexbox, trochę go nie czaje ale wydaje mi się że zeń lepiej korzystać :P