Obrazki w boxie

pytanie zadane 28 lipca 2018 w HTML i CSS przez Hipolit Roszkowski Obywatel (1,480 p.)

Jak dodać obrazki na środku tych prostokątów?

https://codepen.io/Roszkowsky/pen/mjqMyX

1 odpowiedź

odpowiedź 28 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 28 lipca 2018 przez Hipolit Roszkowski

Najlepsza

Jeśli chodzi o wyśrodkowanie tylko w poziomie to możesz zrobić po prostu:

.three {
  // Twoje style
  text-align: center;
  &>img {
    width: ...
    height: ...
  }
}

czyli ustawić text-align dla kontenera, w który wrzucisz IMG i odpowiednio ostylować sam obrazek pod kątem jego wymiarów.

Ewentualnie jeśli ma być środkowanie w poziomie i pionie do daj flexa:

// dla kontenera:
  display: flex;
  justify-content: center;

// dla obrazka:
  align-self: center;

Jeśli wywalisz wtedy float: left to także pozostałe elementy ostyluj na flexie, to dużo przyjemniejsze niż te floaty.

komentarz 28 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Tak na szybko sforkowany Twój codepen i włączony flex:

https://codepen.io/Tomek_Sochacki/pen/EpbvKg?editors=1100

Kod pisany na szybko więc nie jest super, ale chodzi o zasadę.

komentarz 28 lipca 2018 przez Hipolit Roszkowski Obywatel (1,480 p.)

Gdzie mogę dowiedzieć się treściwie i krótko display:flex?

kolejny raz się z tym spotykam ale nie wiem jak to działa

komentarz 28 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

https://devblog.eu/2017/04/flexbox-czesc-pierwsza/

To blog po polsku w miarę fajnie wprowadzający do tematu, a tu chyba najczęściej polecany poradnik:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

komentarz 28 lipca 2018 przez Hipolit Roszkowski Obywatel (1,480 p.)

Dzięki za wszytko :P

komentarz 28 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Spoko. Uwierz mi, nie bój się flexa. Kiedyś też unikałem jak ognia i robiłem floaty, clear itp. itd. Pierwszy projekt w flex, fakt, było trochę zabawy i newrów, ale teraz nie wyobrażam sobie wrócić do float :)

Jest też css grid, ale nie pracowałem z tym jeszcze więc tutaj się nie wypowiem.