od zera do webmastera

Wyrównanie w środku w DIV-ie

Jak wycentrować w środku DIV-a w poziomie a nawet w pionie

Jeśli ot tak nadamy pojemnikom DIV jakieś wymiary i włożymy jeden w drugi to w sposób naturalny dla siebie, wyrównają się w lewym górnym rogu.
Stworzyłem w DIVy o nazwach ZEW i WEW (ten co na zewnątrz i ten co wewnątrz) I dałem im takie STYLE (stylesheet)

.zew {width: 200px; height: 200px; background-image: url(img/miarka.gif); position: relative; margin:10px; }
.wew {width: 150px; height: 150px; background-color: #eee;}

ZEW
WEW

01

Jest dość prostym zabiegiem wyrównanie DIV-ów w poziomie - to zapewne już wiesz. Wystarczy wewnętrznemu nadać margines lewy i prawy jako AUTO. Tu teoretycznie MARGIN:AUTO działa na wszystkie strony, ale choć wyrównało nam się w poziomie, to wyrównanie w pionie to klęska. DIV który nazwaliśmy WEW jest przyklejony do górnej krawędzi. Pokombinujmy nad wyrównaniem jego pozycji w pionie. Mie ma tu prostej cechy która by to załatwiała, czasem nawet się wydaje, że nie da się wyrównywać pionowo w środku DIV-a, zobaczymy jednak, ze wyśrodkowanie jest możliwe.

.wew-01 {width: 150px; height: 150px; background-color: #eee; margin:auto;}

02

Przyszło mi do głowy by uzyskać wyrównanie w pionie DIV-a przy pomocy POSITION i nadania wartośći 50% - wydaje się że powinno tak zadziałać.
Hyym!!!... nie całkiem o to nam chodziło :-(
Dokładnie na środku znalazł się narożnik wewnętrznego DIV-a a chciałem, by znalazł się srodek w środku. Próbujmy dalej.

.wew-02 {width: 150px; height: 150px; background-color: #eee; position: absolute; top:50%; left:50%;}




03

Chyba się udało wyśrodkować pionowo po wstawieniu takiego stylu

.wew-03 {width: 150px; height: 150px; background-color: #eee; position: absolute; top:12.5%; left:12.5%;}

Ale wcale nie jestem zadowolony, bo wstawiając tu wartości pozycji, wprawdzie jest od góry i dołu tyle samo przestrzeni, ale zadziała to tylko przy tych wtmiarach DIV-ów. Nie jest to więć żadne wyrównywanie się które się dostosowywuje w stosunku do środka, a ustawienie pozycji na stałe, choć w oparciu o %%.(Na marginesie uwaga - wartości dziesiętne wstawiamy z kropką nie przecinkiem!!!)

04

Wróćmy więc krok do tyłu, do tego DIV-a który zamiast nam się grzecznie ustawić na środku, wylazł na bok. Nie przejmiemy się tym i w jego środek włożymy jeszcze inny pojęmnik DIV (pomarańczowy), który teraz będzie tym do wyśrodkowania, a tym wyłażącym tylko sie posłużymy.

.wew-04 {width: 150px; height: 150px; background-color: #eee; position: absolute; top:50%; left:50%;}
.wew-wew-04 {width: 150px; height: 150px; background-color: orange; position: absolute; bottom:50%; right:50%;}

Dobrze, o to chodziło. Wprawdzie ten szary głupio sterczy , ale przecież cóż za problem, pozbawić go wypełnienia (background) i stanie się niewidoczny. Sprawdżmy jeszcze, czy to naprawdę się dostosowuje? Zmienię jeszcze wymiary zewnętrznego i wewnętrznego, schowam pomocniczy DIV WEW...




05

Działa!!! DIV w DIV-ie wyrównuje się w pionie. Jest to rozwiązanie elastyczne dostosowuje się do zmieniających się rozmiarów. Ta mała tylko uwaga, ze oba DIVy w środku muszą mieć te same wymiary.
Przy tabelkach TABLE było inne rozwiązanie i co tu dużo mówić.. prostsze VALIGN="MIDDLE" ale jak widać można znaleźć i rozwiązanie wyśrodkowania pionowego i dal DIV-ów.

06

Z wyrównywaniem pionowym DIV-a w DIV-ie już koniec, ale jeszcze jeden sposób na wyśrodkowywanie wertykalne, tym razem tekstu. Gdy wpiszemy tekst w pojemniku DIV, ustawi się przy górnej krawędzi. Możemy przy pomocy MARGIN dla tekstu opóścić go niżej. Jest jednak i inny sposób, by napis ustawiał się w połowie wysokości DIV-a
Żart polega na nadaniu wysokości linni równej wysokości DIV-a

.zew-06 {width: 300px; height: 200px; background-image: url(img/miarka.gif); position: relative; margin:10px; } .zew-06 p{line-height: 200px; color:#fff; font-weight:900; }

Text w środku

Rozwiazanie 07

Czy to szczęśliwa siódemka? Tu do DIV-a zewnetrznego dodałem takie cechy

display:flex; justify-content:center; align-items:center;

Text w środku
I druga linia tekstu