[Ksurix]

Mirki podczas nauki htmla i cssa natrafiłem na problem który pewnie dla was jest błachy ale dla mnie jest to góra lodowa, mój mózg nie może tego pojąć, znaleźć logicznej odpowiedzi która by rozwiała moje wątpliwości.

Mamy następującą sytuacje: Jest div menu(który ma zdefinowane text-align:center), i w tym divie jest pięć innych divów. układamy je koło siebie używając "float:left;" i teraz dochodzimy do mojego problemu. Co zrobić aby wszystkie divy wyśrodkować? tak aby odległośc od diva po lewej do lewego marginesu była taka sama jak odległość diva po prawej do prawego marginesu? A no znalazłem rozwiązanie że wystarczy dodać "Display: inline-block" no i działa....Ale nie mam pojęcia dlaczego, jak to działa? Bo w internecie nie ma o tym mowy, dlaczego akurat użyliśmy takiego rozwiązania? te definicje w internecie nic mi nie mówią, nie poruszają tej problematyki..albo ja jestem po prostu głupi..No nie wiem, po prostu zaciąłem się na tym i nie umiem ruszyć, czuje że jest to strasznie banalny problem ale mimo to ten problem jest dla mnie dużym problemem.

[P.....X]

@Ksurix: Może daj jakiś przykład na jakimś https://jsfiddle.net/ czy coś, bo nie chcę się tej ściany tekstu czytać...

[Ksurix]

@PsychoX: ok, poczekaj

[Danieru]

@Ksurix
O ile dobrze rozumiem chcesz wiedzieć dlaczego użyto klasy display?
https://www.w3schools.com/cssref/pr_class_display.asp

[P.....u]

Działa wtedy środkowanie bo text align oddziałowuje na elementy inline, inline-block. Nie ma co tu zbytnio tłumaczyć. Jeśli bys chciał je bez tego wysrodkowac, to np. Zamykasz te elementy z float w div (już bez float żadnego, jedynie w nim na końcu clear both), określasz mu długość i margin auto dla lewej i prawej strony.
Strasznie chaotycznie napisałem, ale może zrozumiesz

[A.....C]

@PanKszysiu: dokladnie, elementy menu wjebujesz w div, ktoremu dajesz margin: 0 auto, zeby go wycentrowac i dziala

[Ksurix]

@PsychoX: bylem zw, sorry.
tutaj masz kod. chcę wiedzieć dlaczego uzywamy display: inline block; jak on dziala i w ogóle dlaczego go uzywamy skoro jest on konkurencja dla float:left; ...a uzywamy dwóch na raz..
https://jsfiddle.net/k8vew0z9/

[Ksurix]

@PanKszysiu: a divy nie są elementami inline block?

[P.....X]

@Ksurix: Próbowałeś usuwać jedno z nich i testować jak działają? Przeczytaj jeszcze raz co robią te opcje ;)

[Ksurix]

@PsychoX: tak usuwałem, zauważyłem że display: inline-block; dziedziczy text-align:center po po divie "menu". tylko ze te "text-align:center" wyśrodkowuje tylką tekst, a inline block robi to z divami...Czytałem z wielu źródeł i nie do konca rozumiem jak to się dzieje i dlaczego, dlatego szukam tutaj kogos kto mi to zrozumiałym językiem opisze

[P.....u]

@Ksurix nie tyle że tekst, a elementy inline, inline-block i w sumie nie wiem czy coś jeszcze.
Div domyślnie jest elementem blokowym (display block)

[Jurigag]

@Ksurix: https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block

[Ksurix]

@PanKszysiu: czyli display:inline-block zamienia divy (blocki) na inline-blocki..A jesli są inline, to znaczy ze moze zadzialac na nie text-align, tak?

[P.....u]

@Ksurix: Tak. display: inline-block; zmienia sposób wyświetlania z block na inline-block, i dzieki temu oddziałowuje na tego div twój text-align.

[Ksurix]

@PanKszysiu: ok, dzięki :) rozjaśniło mi to całą sytuacje, wcześniej nie widziałem zależności pomiędzy tym wszystkim, dzięki bardzo..Bo zaciąłem się na tym na dwa dni

[rukh]

@Ksurix:

Ala{
display: block;
}