pozycjonowanie elementu w środku rodzica a margin-left:-50%, Wytłumaczcie mi proszę ostatni paragraf z artykułu na w3.org |
pozycjonowanie elementu w środku rodzica a margin-left:-50%, Wytłumaczcie mi proszę ostatni paragraf z artykułu na w3.org |
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... |
|
|
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. -------------------- |
|
|
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ę.
-------------------- |
|
|
Wersja Lo-Fi | Aktualny czas: 27.04.2024 - 03:57 |