Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: pozycjonowanie elementu w środku rodzica a margin-left:-50%
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
starach
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...
vokiel
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.
trueblue
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ę.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.