• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tajniki wyśrodkowania html css bootstrap

Aruba Cloud - Virtual Private Server VPS
0 głosów
512 wizyt
pytanie zadane 25 stycznia 2019 w HTML i CSS przez kordix Gaduła (3,910 p.)

Skopiowałem sobie już kilka stron dla treningu ale nadal mam wrażenie że jak ustawiam elementy to modlę się żeby zadziałało coś co wcześniej działało idealnie.

Może chcecie zerknąć na ten przykład z codepena ?

Mam ikonę którą chcę po prostu wyśrodkować. Czemu nie działa tu margin:auto? Można się tu poratować flexem co widać w drugim nagłówku, ale co gdyby nie było flexa? Jak ludzie radzili sobie w czasach CSS2? Tu chodzi też o to że przy flexie muszę dołożyć dodatkowe parent divy żeby elementy się wyśrodkowały, ale ustawiły jedne pod drugim. Nie lubię w taki sposób zaśmiecać kodu dodając dodatkowe elementy - chyba że mnie czymś oświecicie?

 

 

1 odpowiedź

+1 głos
odpowiedź 25 stycznia 2019 przez Tnifey Pasjonat (24,190 p.)
edycja 25 stycznia 2019 przez Tnifey

w 16 linijce użyłeś block zamiast flexboxa na rodzicu ikonki, dlatego nie działa Ci wyśrodkowanie poprzez mx-auto

ogólnie jak nie ogarniasz dlaczego tak się dzieje, że np w blockach mx-auto działa a we flexach nie działa to poczytaj trochę o Box Model oraz jak działają poszczególne właściwości display i jakie tagi są domyślnie inline a jakie block

jeśli chodzi o dalszą część pytań to możesz też wyśrodkować elementy używając:

display: inline-block; oraz text-align: center;

display: flex; oraz justify-content: center;

display: block; z ustawioną szerokością oraz margin-left: auto; margin-right: auto;

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

https://codepen.io/Tnifey/pen/OdMJvZ

etc i jeszcze https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment :)

za czasów css2 i html 4.* był jeszcze tag <center> którego już się nie używa :) 

oraz do ćwiczenia flexboxa masz tu https://flexboxfroggy.com/#pl

Podobne pytania

+1 głos
1 odpowiedź 919 wizyt
pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)
0 głosów
1 odpowiedź 287 wizyt
pytanie zadane 7 października 2018 w HTML i CSS przez Moras Obywatel (1,620 p.)
0 głosów
1 odpowiedź 527 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez rob Bywalec (2,440 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...