Wyrównanie w pionie w div. Bonus: komentarze warunkowe

W procesie układania stron internetowych zadanie centrowania bloków jest dość powszechne. Może to być centrowanie pionowe lub poziome.

Na przykład, jeśli witryna ma stałą szerokość, racjonalnie byłoby ustawić ją na środku okna przeglądarki, ponieważ sprawia to, że tekst jest łatwiejszy do odczytania (szczególnie na dużym monitorze). Niektóre projekty zazwyczaj obejmują umieszczenie bloku na środku okna przeglądarki, tj. Wycentrowanie zarówno w pionie, jak i w poziomie.

Najpierw porozmawiajmy o centrowaniu poziomym. Najpopularniejszą techniką jest wycentrowanie bloku poprzez ustawienie wymiarów prawej i lewej strony margines na „auto”. Powiedzmy, że chcemy wyśrodkować blok o identyfikatorze = „kontener” i szerokości 860 pikseli. W tym przypadku w pliku CSS należy napisać:

#pojemnik (
kolor tła: #EEE;
szerokość: 860 pikseli;
margines: 0px automatycznie;
}

Jednakże, tj. starsze wersje (na przykład 5.0) nie wyśrodkują tego bloku. Oczywiście nikt już nie korzysta z tak przestarzałych przeglądarek (na 1800 moich codziennych odwiedzin - tylko 1), ale na wszelki wypadek lepiej sprawić, żeby i tam zadziałało :)

W tym celu element nadrzędny, czyli ten, w którym centrujemy nasz blok (zwykle elementem nadrzędnym jest znacznik BODY), musi ustawić parametr wyrównanie tekstu:środek. W tym przypadku blok zostanie wyrównany do środka, ale cała jego zawartość również zostanie wyrównana do środka, ale nie jest to nam potrzebne. Dlatego wewnątrz tego bloku ustawiamy domyślne wyrównanie - wyrównanie tekstu:do lewej .

treść (wyrównanie tekstu:do środka)

#pojemnik (
kolor tła: #EEE;
szerokość: 860 pikseli;
margines: 0px automatycznie;
wyrównanie tekstu:do lewej;
}

Istnieje również inny sposób poziomego wyrównania bloku, oparty na . Jak zapewne wiesz, domyślnie każdy element blokowy jest dociskany do lewej krawędzi elementu nadrzędnego. Dlatego, aby wyrównać go do środka, potrzebujesz:

2. Przesuń go w prawo o 50% szerokości okna przeglądarki

3. Używając dopełnienia ujemnego, przesuń go w lewo o odległość równą połowie szerokości bloku.

W ten sposób blok zostanie wyśrodkowany. Dla większej przejrzystości obejrzyj poniższy film:

Przykładowy kod CSS:

#pojemnik (
kolor tła:#559964;
pozycja:absolutna;
po lewej:50%;
margines po lewej stronie: -430px;
szerokość: 860 pikseli;
}

Należy zaznaczyć, że jeśli chcemy ustawić blok nie względem okna przeglądarki, ale np. względem innego bloku, to dla tego innego bloku należy ustawić pozycja:względna;

Powiedzmy, że nasz blok #container, który należy wyśrodkować, leży wewnątrz bloku #wrap. Wtedy kod będzie wyglądał następująco:

#wrap(pozycja:względna)

#pojemnik (
kolor tła:#559964;
pozycja:absolutna;
po lewej:50%;
margines po lewej stronie: -430px;
szerokość: 860 pikseli;
}

Spójrzmy teraz na przypadek, gdy trzeba wyrównać blok do środka strony, tj. Zastosuj jednocześnie centrowanie poziome i pionowe. Pozycjonowanie znów wchodzi w grę. Potrzebujemy więc:

1. Ustaw blok na pozycjonowanie absolutne

2. Przesuń go w prawo o 50% i w dół o 50%, umieszczając tym samym jego lewy górny róg na środku okna przeglądarki.

3. Używając dopełnienia ujemnego, przesuń go w górę o odległość równą połowie wysokości bloku i w lewo o odległość równą połowie szerokości bloku.

Spowoduje to umieszczenie bloku na środku strony internetowej.

Załóżmy, że wysokość naszego bloku wynosi 600 pikseli, a szerokość 860 pikseli. Wtedy kod CSS będzie wyglądał następująco:

#pojemnik (
kolor tła:#559964;
pozycja:absolutna;
góra:50%;
po lewej:50%;
margines u góry: -300px;
margines po lewej stronie: -430px;
wysokość: 600 pikseli;
szerokość: 860 pikseli;
}

Mam nadzieję, że sama zasada jest dla Ciebie jasna.

Uwagi:

Będę pierwszą osobą, która obejrzy lekcję!!!

Ech... Po drugie =) Niedawno napotkałem ten problem w IE, cierpiałem przez długi czas)) Dziękuję =)

Dziękuję, strona dodana do zakładek)))

Dziękuję bardzo, Andrey, za nowe lekcje!

Po prostu dziękuję, myślę, że nie ma tu nic do dodania))

Dziękuję za lekcję, dosłownie próbowałem to zrobić kilka dni temu, trochę cierpiałem i tymczasowo odłożyłem to na bok

Ale mam problem: strona w Mozille Firefox nie chce się wyrównać, przykleja się do lewej krawędzi i tyle, nic z powyższych nie pomaga (w Operze to samo).

dlaczego to nie działa? - "jeśli chcesz ustawić blok nie względem okna przeglądarki, ale np. względem innego bloku, dla tego innego bloku musisz ustawić położenie: względne;"

Dziękuję bardzo!! Po prostu GIANT, dziękuję!

Wszystko jest w porządku, ale z jakiegoś powodu wszystkie obrazy układają się na swoim miejscu dopiero po aktualizacji przeglądarki. Proszę mi powiedzieć dlaczego tak się dzieje?

Andrey, dodaj wyszukiwarkę w witrynie.

Dodaj komentarz.

Dzisiaj, drogi czytelniku, zajmiemy się problemem wyrównania pionowego w bloku div.

Najprawdopodobniej już wiesz o istnieniu wspaniałej właściwości CSS wyrównanie w pionie. I sam Bóg nakazał nam używać właśnie tej właściwości do wyrównania w pionie (nie bez powodu ma ona tak oczywistą nazwę).

Sformułowanie problemu: Musisz wyśrodkować zawartość bloku o zmiennej wysokości względem pionu.

Teraz zacznijmy rozwiązywać problem.

I tak mamy blok, jego wysokość może się zmieniać:

Zablokuj zawartość

Pierwszą rzeczą, która przychodzi na myśl, jest wykonanie następującego zwodu:

Zablokuj zawartość

Istnieją podstawy, aby sądzić, że to zdanie Zablokuj zawartość zostanie wyrównany do środkowej wysokości kontenera div.

Ale tego tam nie było! W ten sposób nie osiągniemy oczekiwanego wyrównania do środka. I dlaczego? Wydawać by się mogło, że wszystko jest wskazane poprawnie. Okazuje się, że to jest sedno: nieruchomość wyrównanie w pionie można używać wyłącznie do wyrównywania zawartości komórek tabeli lub do wyrównywania elementów śródliniowych względem siebie.

Jeśli chodzi o wyrównanie wewnątrz komórki tabeli, myślę, że wszystko jest jasne. Ale wyjaśnię inny przypadek z elementami wbudowanymi.

Wyrównanie w pionie elementów wbudowanych

Załóżmy, że masz linię tekstu podzieloną znacznikami linii na części:

Ty wita sztuka tekst!

Znacznik wbudowany to kontener, którego wygląd nie powoduje zawijania treści do nowej linii.

Działanie znacznika block powoduje zawinięcie zawartości kontenera do nowej linii.

jest znacznikiem blokowym. Jeśli załączymy fragmenty tekstu w blokach
, wtedy każdy z nich będzie w nowej linii. Używanie tagu , który w odróżnieniu od
, jest małą literą, kontenery nie zostaną przeniesione do nowej linii, wszystkie kontenery pozostanie na tej samej linii.

Pojemnik wygodny w użyciu przy określaniu fragmentu tekstu specjalnym formatowaniem (zaznaczanie go kolorem, inną czcionką itp.)

Do kontenerów Zastosuj następujące właściwości CSS:

#perviy( wyrównanie w pionie:sub; ) #vtoroy( wyrównanie w pionie:3px; ) #tretiy( wyrównanie w pionie:-3px;)

Wynikowy wiersz tekstu będzie wyglądał następująco:

To nic innego jak pionowe wyrównanie elementów inline i właściwość CSS wyrównanie w pionie radzi sobie z tym zadaniem doskonale.

Trochę się rozproszyliśmy, teraz wracamy do naszego głównego zadania.

Wyrównanie w pionie w kontenerze div

Bez względu na wszystko, do wyrównania w kontenerze div użyjemy właściwości wyrównanie w pionie. Jak już mówiłem, właściwość tę można wykorzystać w przypadku wyrównywania elementów inline (przypadek ten szczegółowo omawialiśmy powyżej i nie nadaje się on dla nas do wyrównywania w kontenerze div); pozostaje tylko wykorzystać fakt, że wyrównanie w pionie działa dla komórek tabeli.

Jak możemy to wykorzystać? Nie mamy tabeli, pracujemy z kontenerem div.

Ha, okazuje się, że jest to bardzo proste.

Właściwość CSS wyświetlacz pozwala zamienić nasz blok div w komórkę tabeli, można to zrobić łatwo i naturalnie:

Powiedzmy, że mamy div klasy wyrównanie tekstu:

Zablokuj zawartość

Dla tego bloku określamy następującą właściwość CSS:

Textalign(wyświetlanie: komórka tabeli; )

Ta instrukcja CSS w cudowny sposób zamieni nasz element div w komórkę tabeli, nie zmieniając go w żaden sposób wizualnie. W przypadku komórki tabeli możemy zastosować tę właściwość wyrównanie w pionie całkowicie, a żądane wyrównanie w pionie będzie działać.

Jednak wszystko nie może zakończyć się tak prosto. Mamy wspaniałą przeglądarkę IE. Nie wie, jak pracować z nieruchomością wyświetlacz: komórka-tabela(Sugeruję przeczytanie tabeli ilustrującej funkcjonalność tej właściwości CSS w różnych przeglądarkach na stronie htmlbook.ru). Dlatego będziemy musieli uciekać się do różnych sztuczek.

Istnieje wiele sposobów osiągnięcia wyrównania w kontenerze div dla wszystkich przeglądarek:

Metoda wykorzystująca dodatkowy pomocniczy kontener div
Metoda wykorzystująca wyrażenie. Wiąże się to ze skomplikowanym obliczeniem wysokości bloków. Nie da się tego zrobić bez znajomości JavaScript.
Korzystanie z właściwości line-height. Ta metoda nadaje się tylko do pionowego wyrównania bloku o znanej wysokości i dlatego nie ma zastosowania w ogólnym przypadku.
Stosowanie bezwzględnego i względnego przesunięcia treści w przypadku przeglądarki IE. Ta metoda wydaje mi się najbardziej zrozumiała i prosta. Dodatkowo można go zaimplementować dla kontenera div o zmiennej wysokości. Zastanowimy się nad tym bardziej szczegółowo.

Jak rozumiesz, musimy po prostu rozwiązać problem wyrównania pionowego w IE związany z niezrozumieniem tej właściwości wyświetlacz: komórka-tabela(ani IE6, ani IE7, ani IE8 nie znam tej właściwości). Dlatego używając komentarz warunkowy Określimy różne właściwości CSS specjalnie dla rodziny przeglądarek IE.

Warunkowy komentarz

Typ konstrukcji:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

nazywa się komentarzem warunkowym (uważaj, rodzaj komentarza warunkowego musi całkowicie odpowiadać podanemu przykładowi, aż do spacji).

Instrukcje zawarte w takim komentarzu warunkowym zostaną wykonane tylko wtedy, gdy przeglądarka interpretująca ten kod należy do rodziny IE.

Zatem za pomocą komentarza warunkowego możemy ukryć fragment kodu przed wszystkimi przeglądarkami z wyjątkiem IE.

Rozwiązanie problemu

Z powodu całej tej pietruszki będziemy musieli zaopatrzyć nasz kod HTML w dwa dodatkowe kontenery. Tak będzie wyglądał nasz blok tekstowy:

To jest swego rodzaju tekst weryfikacyjny.
Składa się z dwóch linii.

Dla kontenera div klasy wyrównanie tekstu Ustawiono właściwości CSS, które wyrównują jego zawartość w pionie dla wszystkich normalnych przeglądarek (oczywiście z wyjątkiem IE):

Wyświetlacz: komórka tabelaryczna; wyrównanie w pionie: środek;

I jeszcze dwie właściwości, które ustawiają szerokość i wysokość bloku:

Szerokość: 500 pikseli; wysokość: 500px;

To wystarczy, aby wyśrodkować zawartość kontenera względem pionu we wszystkich przeglądarkach z wyjątkiem IE.

Teraz zaczynamy dodawać właściwości związane z wyrównaniem dla przeglądarek z rodziny IE(to dla nich zastosowaliśmy dodatkowe klocki div I Zakres):

Nawiązując do tagu div wewnątrz bloku klasowego wyrównanie tekstu. W tym celu należy najpierw wskazać nazwę klasy, a następnie oddzieloną spacją tag, do którego mamy dostęp.

Textalign div(pozycja: absolutna; góra: 50%; )

Ten projekt oznacza: dla wszystkich znaczników div wewnątrz bloku z klasą wyrównanie tekstu zastosować wymienione właściwości.

Odpowiednio style określone dla bloku wyrównanie tekstu są modyfikowane:

Textalign (wyświetlanie: komórka tabeli; wyrównanie w pionie: środek; szerokość: 500 pikseli; wysokość: 500 pikseli; pozycja: względna; )

Teraz lewy górny punkt bloku tekstowego został przesunięty w dół o 50%.

Aby wyjaśnić, co się dzieje, narysowałem ilustrację:

Jak widać na zdjęciu, poczyniliśmy pewne postępy. Ale to nie wszystko! Lewy górny punkt żółtego bloku rzeczywiście przesunął się o 50% w dół w stosunku do bloku macierzystego (fioletowego). Ale potrzebujemy, aby znajdował się na pięćdziesięciu procentach wysokości fioletowego bloku. środek żółtego bloku, a nie jego lewy górny punkt.

Teraz tag zacznie działać Zakres i jego względne położenie:

Rozpiętość tekstu (pozycja: względna; góra: -50%; )

W ten sposób przesunęliśmy żółty klocek w górę o 50% jego wysokości w stosunku do jego początkowej pozycji. Jak rozumiesz, wysokość żółtego bloku jest równa wysokości wyśrodkowanej zawartości. Ostatnia operacja na kontenerze span umieściła naszą zawartość pośrodku fioletowego bloku. Brawo!

Oszukajmy trochę

Przede wszystkim musimy ukryć pietruszkę przed wszystkimi normalnymi przeglądarkami i otworzyć ją dla IE. Można to oczywiście zrobić za pomocą komentarza warunkowego; nie bez powodu się z tym zapoznaliśmy:

Jest mały problem. Jeśli wyśrodkowana zawartość jest zbyt wysoka, prowadzi to do nieprzyjemnych konsekwencji: przewijanie w pionie powoduje dodatkową wysokość.

Rozwiązaniem problemu: trzeba dodać właściwość przepełnienie: ukryte blok wyrównanie tekstu.

Zapoznaj się szczegółowo z nieruchomością przelewowy możliwe w.

Ostateczne instrukcje CSS dla bloku wyrównanie tekstu ma postać:

Textalign (wyświetlanie: komórka tabeli; wyrównanie w pionie: środek; szerokość: 500 pikseli; wysokość: 500 pikseli; pozycja: względna; przepełnienie: ukryte; obramowanie: 1 pikseli jednolity czarny; )

Przepraszam, zapomniałem wspomnieć o jednej ważnej kwestii. Jeśli spróbujesz ustaw wysokość bloku klasy wyrównanie tekstu jako procent, to masz nic nie będzie działać.

Centrowanie w bloku o zmiennej wysokości

Bardzo często zachodzi potrzeba ustawienia wysokości bloku klasy wyrównanie tekstu nie w pikselach, ale jako procent wysokości bloku nadrzędnego i wyrównaj zawartość kontenera div na środku.

Problem polega na tym, że nie da się tego zrobić w przypadku komórki tabeli (ale blok klasy wyrównanie tekstu dzięki tej właściwości zamienia się dokładnie w komórkę tabeli wyświetlacz:komórka tabeli).

W takim przypadku musisz użyć bloku zewnętrznego, dla którego określono właściwość CSS wyświetlacz:stół i już ustawiłem dla niego procentową wartość wysokości. Następnie zagnieżdżony w nim blok z dyrektywą CSS wyświetlacz:komórka tabeli, z radością odziedziczy wysokość bloku nadrzędnego.

Aby zaimplementować w naszym przykładzie blok o zmiennej wysokości, dokonamy niewielkiej edycji CSS:

Do klasy wyrównanie tekstu zmienimy wartość nieruchomości wyświetlacz Z komórka-stół NA tabela i usuń dyrektywę wyrównania wyrównanie pionowe: środek. Teraz możemy już bezpiecznie zmienić wartość wysokości z 500 pikseli na np. 100%.

Zatem właściwości CSS bloku klasy wyrównanie tekstu będzie wyglądać tak:

Textalign(wyświetlanie: tabela; szerokość: 500 pikseli; wysokość: 100%; pozycja: względna; przepełnienie: ukryte; obramowanie: 1 piksel w kolorze czarnym; )

Pozostaje tylko wdrożyć content centering. Aby to zrobić, kontener div zagnieżdżony w bloku klasy wyrównanie tekstu(to ten sam żółty blok na obrazku), musisz ustawić właściwość CSS wyświetlacz:komórka tabeli, wówczas odziedziczy wysokość 100% z bloku nadrzędnego wyrównanie tekstu(fioletowy blok). I nic nie stanie nam na przeszkodzie, aby wyrównać zawartość zagnieżdżonego w środku kontenera div z właściwością wyrównanie pionowe: środek.

Otrzymujemy kolejną dodatkową listę właściwości CSS dla bloku div zagnieżdżonego w kontenerze wyrównanie tekstu.

Textalign div (wyświetlanie: komórka tabeli; wyrównanie w pionie: środek; )

Na tym polega cała sztuczka. W razie potrzeby możesz mieć zmienną wysokość z wyśrodkowaną treścią.

Aby uzyskać więcej informacji na temat pionowego wyrównania bloku o zmiennej wysokości, zobacz .

CSS

HTML

Myślę, że wielu z Was, którzy mieli do czynienia z układem, spotkało się z koniecznością wyrównywania elementów w pionie i zna trudności, jakie pojawiają się przy wyrównywaniu elementu do środka.

Tak, w CSS istnieje specjalna wielowartościowa właściwość Vertical-align służąca do wyrównywania w pionie. Jednak w praktyce wcale nie działa to zgodnie z oczekiwaniami. Spróbujmy to rozgryźć.

Porównajmy następujące podejścia. Wyrównaj za pomocą:

stoły,
wcięcie,
Wysokość linii
rozciąganie,
marża ujemna,
przekształcać
pseudoelement
Flexbox.

Aby to zilustrować, rozważmy następujący przykład.

Istnieją dwa elementy div, z których jeden jest zagnieżdżony w drugim. Nadajmy im odpowiednie klasy – zewnętrzną i wewnętrzną.

Wyzwanie polega na dopasowaniu elementu wewnętrznego do środka elementu zewnętrznego.

Najpierw rozważmy przypadek, gdy wymiary bloków zewnętrznych i wewnętrznych znany. Dodajmy regułę display: inline-block do elementu wewnętrznego oraz Text-Align: Center i Vertical-align: Middle do elementu zewnętrznego.

Pamiętaj, że wyrównanie dotyczy tylko elementów, które mają tryb wyświetlania inline lub inline-block.

Ustawmy rozmiary bloków, a także kolory tła, abyśmy mogli zobaczyć ich granice.

Zewnętrzny ( szerokość: 200 pikseli; wysokość: 200 pikseli; wyrównanie tekstu: środek; wyrównanie w pionie: środek; kolor tła: #ffc; ) .inner ( wyświetlacz: blok inline; szerokość: 100 pikseli; wysokość: 100 pikseli; kolor tła : #fcc)
Po zastosowaniu stylów zobaczymy, że wewnętrzny blok jest wyrównany poziomo, ale nie pionowo:
http://jsfiddle.net/c1bgfffq/

Dlaczego to się stało? Rzecz w tym, że właściwość Vertical-align wpływa na wyrównanie sam element, a nie jego zawartość(z wyjątkiem sytuacji, gdy jest stosowany do komórek tabeli). Dlatego zastosowanie tej właściwości do elementu zewnętrznego niczego nie dało. Co więcej, zastosowanie tej właściwości do elementu wewnętrznego również nic nie da, ponieważ bloki inline są wyrównane pionowo względem sąsiednich bloków, a w naszym przypadku mamy jeden blok inline.

Istnieje kilka technik rozwiązania tego problemu. Poniżej przyjrzymy się bliżej każdemu z nich.

Wyrównanie za pomocą tabeli

Pierwsze rozwiązanie, które przychodzi na myśl, to zastąpienie zewnętrznego bloku tabelą zawierającą jedną komórkę. W takim przypadku wyrównanie zostanie zastosowane do zawartości komórki, czyli do wewnętrznego bloku.

http://jsfiddle.net/c1bgfffq/1/

Oczywistą wadą tego rozwiązania jest to, że z semantycznego punktu widzenia niewłaściwe jest używanie tabel do wyrównania. Drugą wadą jest to, że utworzenie tabeli wymaga dodania kolejnego elementu wokół zewnętrznego bloku.

Pierwszy minus można częściowo usunąć zastępując tagi table i td tagami div i ustawiając tryb wyświetlania tabeli w CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Jednak zewnętrzny blok nadal pozostanie stołem ze wszystkimi wynikającymi z tego konsekwencjami.

Wyrównanie za pomocą wcięć

Jeżeli znane są wysokości bloku wewnętrznego i zewnętrznego, to ustawienie można ustalić za pomocą wcięć pionowych bloku wewnętrznego, korzystając ze wzoru: (H zewn. – H wewn.) / 2.

Zewnętrzna ( wysokość: 200px; ) .wewnętrzna ( wysokość: 100px; margines: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Wadą rozwiązania jest to, że ma ono zastosowanie jedynie w ograniczonej liczbie przypadków, gdy znane są wysokości obu bloków.

Wyrównanie za pomocą wysokości linii

Jeśli wiesz, że blok wewnętrzny nie powinien zajmować więcej niż jedną linijkę tekstu, możesz skorzystać z właściwości line-height i ustawić ją na wysokość bloku zewnętrznego. Ponieważ zawartość wewnętrznego bloku nie powinna zawijać się do drugiej linii, zaleca się dodać również białe znaki: nowrap i overflow: ukryte reguły.

Zewnętrzna ( wysokość: 200 pikseli; wysokość linii: 200 pikseli; ) .inner ( biała spacja: nowrap; przepełnienie: ukryte; )
http://jsfiddle.net/c1bgfffq/12/

Tej techniki można również użyć do wyrównywania tekstu wielowierszowego, jeśli ponownie zdefiniujesz wartość wysokości linii dla bloku wewnętrznego, a także dodasz reguły display: inline-block i Vertical-align: środkowy.

Zewnętrzna ( wysokość: 200 pikseli; wysokość linii: 200 pikseli; ) .inner ( wysokość linii: normalna; wyświetlacz: blok inline; wyrównanie do pionu: środek; )
http://jsfiddle.net/c1bgfffq/15/

Wadą tej metody jest konieczność znajomości wysokości bloku zewnętrznego.

Wyrównanie za pomocą „rozciągnięcia”

Tę metodę można zastosować, gdy nie jest znana wysokość bloku zewnętrznego, ale znana jest wysokość bloku wewnętrznego.

Aby to zrobić, potrzebujesz:

ustawić pozycjonowanie względne do bloku zewnętrznego i pozycjonowanie absolutne do bloku wewnętrznego;
dodaj reguły top: 0 i Bottom: 0 do wewnętrznego bloku, w wyniku czego rozciągnie się on na całą wysokość zewnętrznego bloku;
ustaw pionowe dopełnienie wewnętrznego bloku na auto.

.outer ( pozycja: względna; ) .inner ( wysokość: 100px; pozycja: bezwzględna; góra: 0; dół: 0; margines: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideą tej techniki jest to, że ustawienie wysokości rozciągniętego i ustawionego absolutnie bloku powoduje, że przeglądarka oblicza wypełnienie pionowe w równym stosunku, jeśli jest ustawiona na auto.

Wyrównanie z ujemnym marginesem u góry

Metoda ta stała się powszechnie znana i stosowana bardzo często. Podobnie jak poprzedni, stosuje się go, gdy nie jest znana wysokość bloku zewnętrznego, ale znana jest wysokość bloku wewnętrznego.

Należy ustawić blok zewnętrzny na pozycjonowanie względne, a blok wewnętrzny na pozycjonowanie absolutne. Następnie należy przesunąć blok wewnętrzny w dół o połowę wysokości bloku zewnętrznego top: 50% i podnieść go o połowę własnej wysokości margines-top: -H internal / 2.

Zewnętrzna ( pozycja: względna; ) .wewnętrzna ( wysokość: 100 pikseli; pozycja: bezwzględna; góra: 50%; margines-góra: -50 pikseli; )
http://jsfiddle.net/c1bgfffq/13/

Wadą tej metody jest konieczność znajomości wysokości jednostki wewnętrznej.

Wyrównanie z transformacją

Ta metoda jest podobna do poprzedniej, ale można ją zastosować, gdy nieznana jest wysokość jednostki wewnętrznej. W takim przypadku zamiast ustawiać ujemne dopełnienie pikseli, możesz użyć właściwości transform i przesunąć wewnętrzny blok w górę za pomocą funkcji translacjiY i wartości -50% .

Zewnętrzna ( pozycja: względna; ) .inner ( pozycja: absolutna; góra: 50%; transformacja: translacjaY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Dlaczego w poprzedniej metodzie nie można było ustawić wartości procentowej? Ponieważ procentowe wartości marginesów są obliczane w stosunku do elementu nadrzędnego, wartość 50% będzie stanowić połowę wysokości zewnętrznego pudełka i musielibyśmy podnieść wewnętrzne pudełko do połowy jego własnej wysokości. Właściwość transform jest do tego idealna.

Wadą tej metody jest to, że nie można jej zastosować, jeśli jednostka wewnętrzna ma pozycjonowanie bezwzględne.

Wyrównanie za pomocą Flexbox

Najnowocześniejszym sposobem wyrównania w pionie jest użycie elastycznego układu pudełka (popularnie zwanego Flexbox). Moduł ten pozwala elastycznie kontrolować położenie elementów na stronie, rozmieszczając je niemal w dowolnym miejscu. Wyśrodkowanie dla Flexboxa jest bardzo prostym zadaniem.

Blok zewnętrzny musi być ustawiony na wyświetlanie: flex, a blok wewnętrzny na margines: auto. I to wszystko! piękne, nieprawdaż?

Zewnętrzny (wyświetlacz: flex; szerokość: 200px; wysokość: 200px; ) .inner ( szerokość: 100px; margines: auto; )
http://jsfiddle.net/c1bgfffq/14/

Wadą tej metody jest to, że Flexbox jest obsługiwany tylko przez nowoczesne przeglądarki.

Którą metodę wybrać?

Musisz zacząć od opisu problemu:

Aby wyrównać tekst w pionie, lepiej jest użyć wcięć pionowych lub właściwości line-height.
W przypadku elementów pozycjonowanych bezwzględnie o znanej wysokości (np. ikon) idealna jest metoda z ujemną właściwością marginesu górnego.
W bardziej złożonych przypadkach, gdy wysokość bloku nie jest znana, należy użyć pseudoelementu lub właściwości transform.
Cóż, jeśli masz tyle szczęścia, że nie musisz obsługiwać starszych wersji przeglądarki IE, to oczywiście lepiej skorzystać z Flexboksa.

Dzisiejszy artykuł ma na celu pokazanie, jak wyśrodkować element div, zarówno w poziomie, jak i w pionie, za pomocą kilku trików CSS. Powiemy Ci również, jak wyśrodkować całą stronę lub pojedynczy element div.

Z łatwością wyśrodkuj element DIV na stronie

Ta metoda będzie działać doskonale we wszystkich przeglądarkach.

CSS

Środkowy div (margines: 0 auto; szerokość: 100px;)

Przykład

Wartość auto we właściwości marginesu ustawia lewy i prawy margines na całe miejsce dostępne na stronie. Ważną rzeczą do zapamiętania jest to, że wyśrodkowany element div musi mieć ustawioną wartość szerokości.

Centrowanie DIV wewnątrz elementu DIV w staromodny sposób

Ta metoda div z wyrównaniem do środka będzie działać we wszystkich przeglądarkach.

CSS

Zewnętrzny-div ( dopełnienie: 30px; ) .inner-div ( margines: 0 auto; szerokość: 100px; )

HTML

Przykład

Zewnętrzny div można umieścić w dowolnym miejscu, ale wewnętrzny div musi mieć określoną szerokość ( szerokość).

Centrowanie DIV wewnątrz elementu DIV za pomocą bloku inline

W tej metodzie centrowania elementu div w elemencie div nie jest konieczne określanie szerokości elementu wewnętrznego. Będzie działać we wszystkich nowoczesnych przeglądarkach, w tym IE8.

CSS

Zewnętrzny-div ( dopełnienie: 30 pikseli; wyrównanie tekstu: do środka; ) .inner-div ( display: inline-block; dopełnienie: 50 pikseli; )

HTML

Przykład

Właściwość text-align działa tylko w przypadku elementów wbudowanych. Wartość inline-block umożliwia wyświetlanie wewnętrznego elementu div jako elementu wbudowanego, a także jako bloku ( blok inline). Właściwość text-align na zewnętrznym elemencie div pozwoli nam wyśrodkować wewnętrzny div.

Wyśrodkuj DIV wewnątrz elementu DIV w poziomie i w pionie

Tutaj margines: auto służy do wyśrodkowania elementu div na środku strony. Przykład będzie działać we wszystkich nowoczesnych przeglądarkach.

CSS

Zewnętrzny-div ( dopełnienie: 30px; ) .inner-div ( margines: auto; szerokość: 100px; wysokość: 100px; )

HTML

Przykład

Wewnętrzny element div musi mieć określoną szerokość ( szerokość) i wysokość ( wysokość). Metoda nie zadziała, jeśli zewnętrzny element div ma stałą wysokość.

Wyśrodkuj DIV na dole strony

Tutaj margines: auto służy do wyśrodkowania elementu div w pionie, a pozycjonowanie bezwzględne służy do elementu zewnętrznego. Metoda będzie działać we wszystkich nowoczesnych przeglądarkach.

CSS

Zewnętrzny-div ( pozycja: bezwzględna; dół: 30 pikseli; szerokość: 100%; ) .inner-div ( margines: 0 auto; szerokość: 100 pikseli; wysokość: 100 pikseli; kolor tła: #ccc; )

HTML

Przykład

Wewnętrzny div musi mieć ustawioną szerokość. Odstęp na dole strony jest dostosowywany za pomocą właściwości dolnej zewnętrznego elementu div. Możesz także wyśrodkować element div na górze strony, zastępując właściwość dolną właściwością górną.

Wyśrodkuj elementy DIV na stronie w pionie i poziomie

Tutaj, aby wyśrodkować div, ponownie używamy marginesu: automatycznego i absolutnego pozycjonowania zewnętrznego div. Metoda będzie działać we wszystkich nowoczesnych przeglądarkach.

CSS

Środkowy div (pozycja: bezwzględna; margines: automatyczny; góra: 0; prawa: 0; dół: 0; lewa: 0; szerokość: 100 pikseli; wysokość: 100 pikseli; )

Przykład

Element div musi mieć ustawioną szerokość ( szerokość) i wysokość ( wysokość).

Wykonanie adaptacyjnego centrowania elementu DIV na stronie

Tutaj, aby wyśrodkować element div za pomocą CSS, dostosowujemy szerokość elementu div tak, aby reagował na zmiany rozmiaru okna. Ta metoda działa we wszystkich przeglądarkach.

CSS

Środkowy div (margines: 0 auto; maksymalna szerokość: 700px;)

Przykład

Wyśrodkowany element div musi mieć ustawioną właściwość max-width.

Centrowanie DIV wewnątrz elementu przy użyciu właściwości bloku wewnętrznego

Wewnętrzny element div jest tutaj responsywny. Ta metoda wyśrodkowania elementu div wewnątrz elementu div będzie działać we wszystkich przeglądarkach.

CSS

Zewnętrzny-div ( dopełnienie: 30px; ) .inner-div ( margines: 0 auto; maksymalna szerokość: 700px; )

HTML

Przykład

Wewnętrzny div musi mieć ustawioną właściwość max-width.

Centrowanie dwóch responsywnych elementów div obok siebie

Tutaj mamy dwa responsywne elementy div obok siebie. Ta metoda umieszczenia elementu div na środku ekranu będzie działać we wszystkich nowoczesnych przeglądarkach.

CSS

Kontener (text-align: center; ) .left-div ( display: inline-block; max-width: 300px; Vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) ekran i (maks. szerokość: 600 pikseli) ( .left-div, .right-div ( lef max-width: 100%; ) )

HTML

Przykład

Tutaj mamy kilka elementów z zastosowaną właściwością inline-block, umieszczonych wewnątrz wyśrodkowanego kontenera. W tym przykładzie zastosowano również zapytania o media CSS; oznacza to, że jeśli rozmiar ekranu jest mniejszy niż 600 pikseli, wówczas właściwość max-width zarówno dla lewego, jak i prawego elementu div jest ustawiona na 100%.

Element DIV wycentrowany za pomocą Flexbox

Tutaj centrujemy div CSS za pomocą Flexbox. Ma on na celu ułatwienie procesu tworzenia projektów interfejsów użytkownika. Moduł ten jest obsługiwany przez Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, a także przeglądarkę Android 40+.

CSS

Kontener (wyświetlanie: flex; wyrównanie-przedmiotów: środek; justify-content: środek; wysokość: 100vh; ) .item ( kolor tła: #f3f2ef; promień obramowania: 3px; szerokość: 200px; wysokość: 100px; )

W CSS niektóre pozornie proste rzeczy nie są tak łatwe do wykonania. Jedną z tych rzeczy jest wyrównanie, tj. gdy jeden element musi być ustawiony w określony sposób względem drugiego.

W artykule przedstawiono kilka gotowych rozwiązań, które pomogą uprościć pracę elementów centrujących w poziomie i/lub w pionie.

Uwaga: Pod każdym rozwiązaniem znajduje się lista przeglądarek wskazująca wersje, w których działa określony kod CSS.

CSS — Wyśrodkuj blok

1. Wyrównanie jednego bloku ze środkiem drugiego. W tym przypadku pierwszy i drugi blok mają dynamiczne rozmiary.

...

Rodzic ( pozycja: względna; ) .child ( pozycja: bezwzględna; lewa: 50%; góra: 50%; -webkit-transform: tłumacz (-50%, -50%); -moz-transform: tłumacz (-50% , -50%); -ms-transform: translacja(-50%, -50%); -o-transform: translacja(-50%, -50%) ;

Chrome 4.0+
Firefoksa 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Wyrównanie jednego bloku ze środkiem drugiego. W tym przypadku drugi blok ma stałe wymiary.

Rodzic ( pozycja: względna; ) .child ( pozycja: bezwzględna; lewa: 50%; góra: 50%; /* szerokość i wysokość 2 bloków */ szerokość: 500px; wysokość: 250px; /* Wartości ustalane są w zależności na jego rozmiar */ /* margines-lewy = - szerokość / 2 */ margines-lewy: -250px; /* margines-górny = - wysokość / 2 */ margines-górny: -125px )