Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> pozycjonowanie elementu w środku rodzica a margin-left:-50%, Wytłumaczcie mi proszę ostatni paragraf z artykułu na w3.org
starach
post 14.07.2015, 17:25:25
Post #1





Grupa: Zarejestrowani
Postów: 999
Pomógł: 30
Dołączył: 14.01.2007
Skąd: wiesz ?

Ostrzeżenie: (0%)
-----


Cześć,

Znalazłem już dosyć leciwy ( 4 lata ) artykuł o pozycjonowaniu elementów na stronie w centrum zarówno poziomo jak i pionowo.

Ostatni paragraf chyba nie do końca rozumiem. Proszę o wytłumaczenie.

link do artykułu: http://www.w3.org/Style/Examples/007/center.en.html

Cytat
The 'margin-right: -50%' is needed to compensate the 'left: 50%'. The 'left' rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container. By saying that the right margin of the element is further to the right by that same amount, the maximum line length is again the same as the container's width.

Try resizing the window: You'll see that each sentence is on one line when the window is wide enough. Only when the window is too narrow for the whole sentence will the sentence be broken over several lines. When you remove the 'margin-right: -50%' and resize the window again, you'll see that the sentences will be broken already when the window is still twice as wide as the text lines.


~Dzięki.

p.s.
Jezu jak ja się cieszę że wreszcie te cholerne IE 6 i 7 odeszło do lamusa i nawet powoli 8, 9 trafia szlag! Jak ja kląłem tych kilka lat temu o rany...
Go to the top of the page
+Quote Post
vokiel
post 14.07.2015, 19:25:04
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


Nom, dobre czasy nastają - flexbox rozwiązuje takie problemy.

Co do wytłumaczenia tego centrowania.
Na początek ustawiasz kontener na 50% od góry i od lewej - więc on zaczyna się od środka, ale nie jest wycentrowany (jego długość i wysokość są na prawo i w dół od środka ekranu. I teraz aby przesunąć kontener o połowę jego szerokości w lewo (czyli faktycznie wycentrować na środku ekranu) zastosowany jest ten ujemny prawy margines. On powoduje, że kontener ma do wykorzystania na lewo jeszcze 100% swojej szerokości. translate(50%,50%) przesuwa go o połowę szerokości i wysokości.


--------------------
Go to the top of the page
+Quote Post
trueblue
post 14.07.2015, 19:38:45
Post #3





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Ujemny prawy margines jest tylko i wyłączenie po to, aby element nie skrócił się o 50%, a co za tym idzie, aby tekst w miarę możliwości nie łamał się.


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 27.04.2024 - 03:57