Każdy, kto zajmuje się układem, prędzej czy później staje przed koniecznością wyrównania elementów w pionie... i wie, jakie trudności mogą pojawić się przy wyrównaniu elementu do środka. W CSS istnieje właściwość `vertical-align` z wieloma wartościami, co logicznie rzecz biorąc powinno wystarczyć wyrównanie pionowe. Jednak w praktyce wcale nie działa to tak, jak oczekiwano.

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

1. Wyrównanie za pomocą tabeli

W tym przypadku zastępujemy blok zewnętrzny tabelą jednokomórkową. Wyrównanie zostanie zastosowane do zawartości komórki, czyli wewnętrznego bloku.

HTML

CSS

Zewnętrzna (szerokość: 200 pikseli; wysokość: 200 pikseli; wyrównanie tekstu: środek; wyrównanie w pionie: środek; kolor tła: #ffc;)

Główna wada ta decyzja z semantycznego punktu widzenia tabela nie jest używana zgodnie z jej przeznaczeniem. Drugą wadą jest to, że aby utworzyć stół, trzeba dodać do niego kolejny element jednostka zewnętrzna.

Pierwszej wady można częściowo uniknąć, zastępując znaczniki tabeli divami i ustawiając tryb wyświetlania tabeli w CSS.

HTML

CSS

Zewnętrzne opakowanie ( display : table ; ) .outer ( display : table-cell ; )

2. Wyrównanie za pomocą wcięć

Pod warunkiem, że znamy wysokość bloczka wewnętrznego i zewnętrznego, wyrównanie można ustalić za pomocą wcięć pionowych bloczka wewnętrznego, korzystając ze wzoru: (H zewn. – H wewn.) / 2.

CSS

Zewnętrzna (wysokość: 200px;) .wewnętrzna (wysokość: 100px; margines: 50px 0;)

Minusem rozwiązania jest obowiązkowa znajomość wysokości obu bloków.

3. Wyrównanie za pomocą wysokości linii

Jeśli wewnętrzny blok zajmuje nie więcej niż jedną linię tekstu, możesz użyć właściwości line-height i ustawić ją na wysokość równą wysokości zewnętrznego bloku. Ponieważ zawartość wewnętrznego bloku nie powinna zawijać się do drugiej linii, wskazane jest dodanie również białych znaków: nowrap i overflow: ukryte reguły.

CSS

Zewnętrzna (wysokość: 200px; wysokość linii: 200px;) .inner (biała spacja: nowrap; przepełnienie: ukryta;)

Metodę tę można również zastosować do poziomowania tekst wielowierszowy. Aby to zrobić, blok wewnętrzny musi zastąpić wartość wysokości linii, a także dodać reguły display: inline-block i Vertical-align: Middle.

CSS

Zewnętrzna (wysokość: 200px; wysokość linii: 200px;) .inner (wysokość linii: normalna; wyświetlacz: blok inline; wyrównanie w pionie: środek;)

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

4. Wyrównanie metodą „rozciągania”

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

Aplikować Ta metoda Potrzebujemy:

• Ustaw blok zewnętrzny na pozycję względnego pozycjonowania: wzgl., a blok wewnętrzny na pozycję absolutną: absolutny ;
• Dodaj kilka reguł góra: 0 i dół: 0 do wewnętrznego bloku, w wyniku czego rozciągnie się on na całą wysokość zewnętrznego bloku;
• Ustaw pionowe wypełnienie wewnętrznego bloku na auto.

CSS

Zewnętrzna (pozycja: względna;) .wewnętrzna (wysokość: 100px; pozycja: bezwzględna; góra: 0; dół: 0; margines: auto 0;)

5. Wyrównanie z ujemnym marginesem u góry

Podobnie jak poprzednią metodę tę stosuje się, 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 przesuń wewnętrzny blok w dół o połowę wysokości zewnętrznego bloku top: 50% i podnieś go o połowę jego własnej wysokości margines-top: -H _wewnętrzny / 2 .

CSS

Zewnętrzna (pozycja: względna;) .wewnętrzna (wysokość: 100px; pozycja: bezwzględna; góra: 50%; górny margines: -50px;)

Minus Ta metoda- musi być znana wysokość jednostki wewnętrznej.

6. Wyrównanie za pomocą transformacji

Metodę tę można zastosować, gdy wysokość jednostki wewnętrznej nie jest znana. Musisz przesunąć blok wewnętrzny w dół o połowę wysokości górnej części bloku zewnętrznego: 50% , następnie użyć właściwości transform i przesunąć go z powrotem w górę za pomocą funkcji TranslationY(-50%).

CSS

Zewnętrzna (pozycja: względna; ) .wewnętrzna (pozycja: absolutna; góra: 50%; transformacja: tłumaczenieY (-50%); )

7. Wyrównanie z pseudoelementem

Jest to najbardziej uniwersalna metoda, którą można zastosować, gdy nie są znane wysokości obu bloków.

Istota metody polega na dodaniu bloku inline o wysokości 100% wewnątrz bloku zewnętrznego i przypisaniu mu wyrównania pionowego. Zatem wysokość dodanego bloku będzie równa wysokości bloku zewnętrznego. Blok wewnętrzny zostanie ustawiony pionowo w stosunku do bloku dodanego, a co za tym idzie bloku zewnętrznego.

Aby nie naruszyć semantyki, zaleca się dodanie bloku inline z wykorzystaniem pseudoelementów before lub after.

CSS

Zewnętrzne: przed (wyświetlanie: blok inline; wysokość: 100%; wyrównanie do pionu: środek; zawartość: „” ; ) .inner (wyświetlanie: blok inline ; wyrównanie do pionu: środek ; )

Wadą tej metody jest to, że nie można jej stosować w przypadku absolutnego pozycjonowania jednostki wewnętrznej.

8. Wyrównanie z Flexboxem

Najnowocześniejszą metodą wyrównania w pionie jest zastosowanie elastycznego układu pudełka (lub Flexbox). 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.

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 dostępna jest specjalna wielowartościowa właściwość Vertical-align służąca do wyrównywania w pionie. Jednak w praktyce wcale nie działa to tak, jak oczekiwano. 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 aplikacja tej nieruchomości Do element zewnętrzny nic nie dał. 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 bloków sąsiednich, 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 wewnętrzny blok powinien zajmować nie więcej niż jedną linię tekstu, możesz skorzystać z właściwości line-height i ustawić ją na wartość równą wysokości zewnętrznego bloku. 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:

1. ustawić pozycjonowanie względne do bloku zewnętrznego i pozycjonowanie absolutne do bloku wewnętrznego;
2. 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;
3. 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ż wartości procentowe właściwości marginesu są obliczane w stosunku do element nadrzędny, wartość 50% byłaby równa połowie wysokości zewnętrznego bloku i musieliśmy podnieść wewnętrzny blok 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 posiada ją jednostka wewnętrzna absolutne pozycjonowanie.

Wyrównanie za pomocą Flexbox

Bardzo nowoczesny sposób wyrównanie w pionie polega na użyciu elastycznego układu pudełka (popularnie znanego jako Flexbox). Ten moduł 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.
• Dla elementów pozycjonowanych bezwzględnie o znanej wysokości (takich jak ikony) jest to idealne rozwiązanie odpowiednia metoda z ujemną właściwością górnego marginesu.
• 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.

Często podczas układania istnieje potrzeba pionowego wyrównania tekstu w bloku. Jeśli trzeba to zrobić w komórce tabeli, ustawiana jest wartość właściwości CSS Vertical-align.

Powstaje jednak rozsądne pytanie: czy można obejść się bez tabeli, bez przeciążania układu strony niepotrzebnymi tagami? Odpowiedź brzmi „można”, ale ze względu na słabą obsługę CSS w przeglądarce MSIE rozwiązanie problemu będzie inne niż rozwiązanie dla innych popularnych przeglądarek.

Jako przykład rozważ następujący fragment:

i spróbuj wyrównać tekst w pionie do środka bloku i do dolnej krawędzi bloku.

Rozwiązanie problemu

„Prawidłowe” przeglądarki (w tym MSIE

Większość nowoczesne przeglądarki obsługuje CSS2.1, a mianowicie wartość komórki tabeli dla właściwości display. Daje nam to możliwość wymuszenia wyglądu bloku tekstu jako komórki tabeli i korzystając z tego wyrównania tekstu w pionie:

div(
wyświetlacz: komórka-tabela;
wyrównanie w pionie: środek;
}

div(
wyświetlacz: komórka-tabela;
wyrównanie w pionie: dół;
}

Internet Explorer (do wersji 7 włącznie)

Problem wyrównywania tekstu do dolnej krawędzi bloku można rozwiązać w MSIE za pomocą pozycjonowania bezwzględnego (tutaj będziemy potrzebować elementu string osadzonego w bloku):

div(
pozycja: względna;
}
zakres div(
Blok wyświetlacza;
pozycja: absolutna;
dół: 0%;
po lewej: 0%;
szerokość: 100%;
}

Ten zestaw reguł działa również w „poprawnych” przeglądarkach.

Określ właściwości

Rozpiętość div (
Blok wyświetlacza;
szerokość: 100%;
}

nie są konieczne, ale mogą być potrzebne, jeżeli oprócz wyrównania tekstu w pionie planujesz zastosować także wyrównanie w poziomie, np. text-align: center ;.

Aby wyrównać tekst w pionie do środka bloku, oryginalny fragment nadal będzie musiał być skomplikowany - wprowadzimy kolejny element liniowy:

Materiał do nauki:

• Centrowanie pionowe w CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Centrowanie pionowe za pomocą CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Wyrównanie w pionie (www.cssplay.co.uk/ie/valign.html)
• Vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Inna metoda wyrównania w pionie w CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Problem centrowania elementów w pionie w CSS ma szereg gotowych rozwiązań. Wybór metody wyrównania w każdym z nich szczególny przypadek zależy od rodzaju, wielkości, umiejscowienia elementów i innych określonych przez nie właściwości.

Poniżej znajduje się kilka popularnych technik wyrównywania w pionie wśród projektantów układów. Pokazuje, jak działają i w jakich przypadkach każdy z nich jest najbardziej odpowiedni.

Oto dwa elementy div:

Każda metoda zostanie zastosowana w celu wyrównania jednostki wewnętrznej ze środkiem jednostki zewnętrznej.

wysokość-linii dla jednej linii

Jeśli element nadrzędny zajmuje jedną linię tekstu i znany jest wzrost elementu podrzędnego, można zastosować właściwość line-height. Wartość właściwości musi być równa wysokości zewnętrznego bloku. Działa to tylko w przypadku jednej linii, więc warto dodać do elementu podrzędnego overflow: hided i white-space: nowrap.

Nie będzie możliwe zastosowanie zapisu procentowego wysokość-linii=100%, gdyż 100% w tym przypadku oznacza wysokość czcionki.

Pojemnik (
wysokość: 300px;
wysokość linii: 300px;
}

Wewnętrzny(
biała spacja: nowrap;
przepełnienie: ukryte;
}

Metodę można zastosować tylko wtedy, gdy znana jest wysokość bloku zewnętrznego.

Tabela z wyrównaniem w pionie

Stół idealnie nadaje się do pionowego ułożenia elementów. Aby nie naruszać semantyki, lepiej tworzyć elementy tabeli za pomocą CSS. Położenie zawartości komórki jest kontrolowane przez wyrównanie do pionu. W tabelach znajdują się cztery wartości tej właściwości:

Linia bazowa – domyślna;
. dół — zawartość na dole komórki;
. środkowy — zawartość w środku komórki;
. top — zawartość na górze komórki.

W pierwszym przykładzie pojedyncza komórka tabeli staje się blokiem zewnętrznym.

Pojemnik (
wyświetlacz: komórka-tabela;
wyrównanie w pionie: środek;
}

Dobrą rzeczą w tej metodzie jest to, że działa ona w przypadku elementów bez podana wysokość, ale w niektórych przypadkach jego użycie utrudnia fakt, że zewnętrzny blok, jak każda komórka tabeli, dostosowuje swoją szerokość do swojej zawartości, a rozciągnąć go można jedynie poprzez jawne ustawienie szerokości dla szerokości. W przypadku komórki bez tabeli wartości procentowe nie działają odpowiednio.

Tę wadę można naprawić, otaczając komórkę jej rodzicem za pomocą właściwości display:table. Rozmiar tego elementu można ustawić procentowo. Ostateczny kod będzie wyglądał następująco:

Opakowanie zewnętrzne (
wyświetlacz: stół;
}

Pojemnik (
wyświetlacz: komórka-tabela;
wyrównanie w pionie: środek;
}

Pozycja: absolutna + marża ujemna

Metodę stosuje się, gdy znana jest wysokość elementu wewnętrznego. Jednostka zewnętrzna może być nieznana. Rodzic otrzymuje pozycję względną, a znajdujące się w nim dziecko otrzymuje pozycję absolutną.

Wartość właściwości top wynosząca 50% powoduje, że zagnieżdżony element zostanie umieszczony górną krawędzią pośrodku zewnętrznego bloku. Pozostaje tylko podnieść jego ujemny margines-górę o połowę własnej wysokości, tak aby znalazł się dokładnie pośrodku pionu.

Pojemnik (
pozycja: względna;
}

Wewnętrzny(
wysokość: 140px;
pozycja: absolutna;
góra: 50%;
margines u góry: -70px;
}

Wadą tej metody jest konieczność poznania wzrostu dziecka.

Wyrównanie zgodnie z funkcją wyrównania w pionie

Wyrównanie elementów inline i inline-block, w tym obrazów i ikon, w otaczającym tekście odbywa się za pomocą właściwości Vertical-align. W przeciwieństwie do tabeli, w tym przypadku działa cały zbiór jej wartości określonych w specyfikacji.

Jeśli znana jest wysokość elementu nadrzędnego, można użyć tej właściwości do wyśrodkowania tekstu wielowierszowego.

W przypadku bloku zewnętrznego wymagane jest centrowanie jednej linii.

Pojemnik (
wysokość: 140px;
wysokość linii: 140px;
}

Wartość wysokości linii dla bloku wewnętrznego jest ponownie definiowana na normalną lub dowolną żądaną wartość. Podano także wyrównanie w pionie: środek i konwersję na typ inline-block - display: inline-block.

Wewnętrzny(
wyświetlacz: blok inline;
wysokość linii: normalna;
wyrównanie w pionie: środek;
}

Wadą tej metody jest to, że musisz znać wzrost rodzica.

Wyrównanie z transformacją

Funkcja TranslationY właściwości transform umożliwia wyśrodkowanie wewnętrznego bloku o nieznanej wysokości. Aby to zrobić, rodzic musi być ustawiony względnie, a dziecko absolutnie.

Właściwość top o wartości 50% obniża wewnętrzny blok tak, że jego górna krawędź znajduje się pośrodku rodzica. Wartość translacji: -50% podnosi element o połowę jego własnej wysokości i w ten sposób wyrównuje pionowe środki bloków.

Pojemnik (
pozycja: względna;
}

Wewnętrzny(
pozycja: absolutna;
góra: 50%;
transformacja: tłumaczenieY(-50%);
}

Wadą tej techniki jest ograniczona obsługa funkcji transformacji w przeglądarce IE.

Wyrównanie poprzez pseudoelement

Metoda działa, gdy wysokość nie jest znana ani dla pierwszego, ani dla drugiego bloku. Pseudoelement bloku inline jest dodawany wewnątrz elementu nadrzędnego za pomocą przed lub po. Wysokość dodawanego elementu musi być równa wysokości rodzica - wysokość: 100%. Wyrównanie treści w pionie ustawia się za pomocą funkcji Vertical-align: Middle.

Używając Vertical-align: Middle, wewnętrzny blok jest wyrównywany względem tego pseudoelementu. Ponieważ rodzic i dziecko mają ten sam wzrost, element wewnętrzny, choć jest wyrównany w pionie z pseudoelementem, jest również wyśrodkowany w stosunku do pudełka zewnętrznego.

Pojemnik:przed (
treść: "";
wysokość: 100%;
wyrównanie w pionie: środek;
wyświetlacz: blok inline;
}

Wewnętrzny(
wyświetlacz: blok inline;
wyrównanie w pionie: środek;
}

Uniwersalny sposób. Nie działa, jeśli jednostka wewnętrzna jest ustawiona na pozycjonowanie bezwzględne.

Flexbox

Najnowszy i najłatwiejszy sposób na wyrównanie elementów w pionie. Flexbox pozwala na dowolną aranżację elementów strony internetowej. Aby wyśrodkować blok, wystarczy ustawić display: flex dla elementu nadrzędnego i margines: auto dla elementu podrzędnego.

Pojemnik (
wyświetlacz: elastyczny;
szerokość: 320px;
wysokość: 140px;
}

Wewnętrzny(
szerokość: 120px;
margines: automatyczny;
}

Flexbox działa tylko w nowoczesnych przeglądarkach.

Wybór metody

Wybór techniki ustawiania w pionie zależy od zadania i ograniczeń, które mogą występować w konkretnym przypadku.

Wysokość elementów nie jest znana

W tej sytuacji możesz skorzystać z jednej z czterech uniwersalnych metod:

1. Tabela. Element nadrzędny staje się komórką tabeli utworzoną w formacie HTML lub poprzez tabelę wyświetlaną/komórkę wyświetlaną. Ten element nadrzędny ma funkcję wyrównania pionowego: środek.

2. Pseudoelement. Dla bloku zewnętrznego tworzony jest pseudoelement bloku inline o szerokości = 100% i wyrównaniu pionowym: środkowy. Dziecko otrzymuje wyświetlanie: blok inline i wyrównanie pionowe: środek. Metoda nie działa tylko wtedy, gdy blokowi wewnętrznemu zostanie podane położenie absolutne.

3. Przekształć. Rodzic otrzymuje pozycję: krewny. Dziecko otrzymuje pozycję: absolutną, górną: 50% i transformację: tłumaczY(-50%);

4. Flexbox. Blok zewnętrzny jest ustawiony na wyświetlanie: flex, blok wewnętrzny jest ustawiony na margines: auto.

Znany jest tylko wzrost dziecka

Jednostka zewnętrzna jest umieszczona względem siebie; Elementowi wewnętrznemu nadano położenie bezwzględne, góra: 50% i margines-góra równy połowie jego wysokości.

Jedna linia na blok o znanej wysokości

Blok zewnętrzny otrzymuje właściwość line-height o wartości równej jego wysokości.

Wysokość zewnętrznego bloku jest znana, ale elementu wewnętrznego nie.

Rodzic otrzymuje wysokość linii równą jej wysokości. Wysokość linii dziecka jest ponownie definiowana na normalną lub dowolną żądaną wartość i przydzielane są jej display: inline-block i Vertical-align: środkowy.

Układanie różnych elementów, np. na stronie internetowej czy stronie, jest początkowo dla kogoś wymagające zadanie, co zmienia pionowe wyrównanie tekstu. Co ciekawe, jeden z najbardziej skomplikowane sposoby za pomocą CSS jest wyśrodkowanie treści. Wyśrodkowanie zawartości w poziomie jest w niektórych momentach stosunkowo łatwe. Wyśrodkowanie treści w pionie jest prawie zawsze trudne. Krążyna inny element, który należy ustawić pionowo za pomocą CSS. Jest to zdecydowanie bardzo często zadawane pytanie, które stwarza problemy projektantom i webmasterom. Istnieje jednak wiele metod wykonywania centrowania pionowego i każda z nich jest dość prosta w użyciu.

Jeśli kiedykolwiek tego próbowałeś, jest to trudne, szczególnie jeśli chcesz uniknąć używania tabel. Na szczęście nasze wołanie o pomoc zostało wysłuchane i jedną z nowych broni dodanych do arsenału CSS w celu rozwiązania tego problemu jest układ znany jako elastyczny układ pudełek. Jak dowiesz się za kilka chwil, zapewnia on naprawdę świetne funkcje upraszczające złożone układy. Niektóre z tych wspaniałych funkcji pozwalają także wyśrodkować zawartość w pionie i poziomie i właśnie tym zajmiemy się w tym samouczku. Można to w pewnym stopniu zrobić za pomocą dopełnienia, ale może to spowodować przeniesienie układu na mniejsze ekrany. Dodanie niestandardowej klasy CSS do arkusza stylów oznacza, że ​​możesz wyśrodkować dowolną treść w pionie w ciągu kilku sekund.

Wyrównanie poziome określa, w jaki sposób lewa i prawa krawędź akapitu pasują do lewej i prawej krawędzi pole tekstowe. Wyrównanie w pionie określa pionowe położenie znaku w polu tekstowym. Brak dobre sposoby centrowanie elementów w pionie w CSS było ciemną wadą jego reputacji przez prawie całe jego istnienie.

Pierwsza metoda z wysokością linii

Pierwsza metoda jest prosta i nieco banalna, ale ma swoje wady, które ograniczą jej zastosowanie. Podczas kodowania stron HTML dla witryny internetowej odstępy między wierszami treści tekstowej są prawdopodobnie jednym z atrybutów, który zwykle pozostawia się domyślnie. Ogólnie rzecz biorąc, musimy ustawić wysokość samej linii, która ma podobną wysokość dla bloku, w którym jest używana Wysokość linii nieruchomość.

CSS

Constutesim_first(
obramowanie: 2 piksele stałe #bf1515;
wysokość: 175px;
}
.constutesim_first > p(
wysokość linii: 175 pikseli;
margines:0;
wyrównanie tekstu:środek;
dopełnienie: 0;
rozmiar czcionki: 17px;
kolor: #3152a0;
rodzina czcionek: Tahoma;
grubość czcionki: pogrubiona;
}

Można też od razu zobaczyć jak wszystko będzie wyglądać w rzeczywistości.

W podobny sposób można sobie wyobrazić ustawienie obrazu, który będzie wyśrodkowany i na pewno pionowy. Tutaj pozostaje tylko określić jedną właściwość: Vertical-align: Middle; który odpowiada za wyświetlanie obrazu.

CSS

Druga odmiana (
obramowanie: 2 piksele w kolorze czerwonym;
wysokość linii: 158 pikseli;
}

Div drugiej odmiany (
wyrównanie tekstu:środek;
}
.druga odmiana img (
wyrównanie w pionie: środek;
obramowanie: 0px stałe #3a3838;
}

Realizujemy wyśrodkowane i pionowe migawki obrazów.

Wyrównanie z właściwością pozycji

Jest to prawdopodobnie najbardziej znana metoda, ale najczęściej stosowana w aplikacjach za pomocą CSS. Ale tutaj musimy dodać, że to też nie jest idealne i ta metoda też ma swoje małe niuanse, które są związane ze środkiem elementu, który jeśli zostanie ustawiony procentowo, będzie wyśrodkowany po lewej stronie u góry, wewnątrz samego bloga.

CSS

Opcja konkurencyjna (
obramowanie: 2 piksele ciągłe #d40e0e;
wysokość: 162px;
pozycja: względna;
}
.competaird-opcja div (
pozycja: absolutna;
góra: 50%;
po lewej: 50%;
wysokość: 28%;
szerokość: 49%;
marża: -2% 0 0 -25%;
obramowanie: 2 piksele stałe #4a4848;
}

Odstępy między wierszami lub wysokość linii to wysokość w pionie między wierszami tekstu w cieniowaniu strona HTML. Prawie zawsze ta wartość odległości jest ustawiana na odpowiednią wartość przez przeglądarkę lub silnik renderujący. Wartość ta zwykle zależy od czcionki wyświetlanej strony i innych czynników.

Wyrównanie z właściwością tabeli

W tej metodzie korzystamy ze sprawdzonych i stara metoda, gdzie konwertujemy elementy na tabelę, w której znajdują się komórki. Jeśli chodzi o tag o nazwie table, to nie będzie on tutaj używany, tutaj ustawimy zupełnie inne Właściwość CSS, to jest display: table;, display: table-cell;. Jeśli mówimy o najstarszych wersjach IE, dane po prostu nie będą tutaj wyświetlane. Mam nadzieję, że zaktualizowałeś swoją przeglądarkę, ponieważ nie jest ona już aktualna i wyświetla prawie wszystko niepoprawnie.

Odmiana Cherevert (
obramowanie: 2 piksele ciągłe #c30b0b;
wysokość: 173px;
wyświetlacz: stół;
szerokość: 100%;
rozmiar czcionki: 17px;
grubość czcionki: pogrubiona;
kolor: #3945a0;
}

Cherevert-wariacja div(
wyświetlacz: komórka-tabela;
wyrównanie w pionie: środek;
wyrównanie tekstu:środek;
}

Przede wszystkim zobaczmy, jaka jest wartość domyślna używana przez większość przeglądarek. Większość nowoczesnych przeglądarek dziennych ma odstępy między wierszami.

Wyrównanie z właściwością flex

Tutaj dochodzimy do bardziej oryginalnej wersji, która ma swoje własne właściwości, które rzadko można znaleźć w układzie zasobu internetowego. Ale nadal są używane, a w niektórych przypadkach są przydatne. To ustala główną oś, więc definicja kierunkowych elementów elastycznych jest umieszczona w pojemniku na dyskietki.

CSS

Wariant-poziomy (
obramowanie: 2 piksele ciągłe #d20c0c;
wysokość: 147 pikseli;
wyświetlacz: elastyczny;
wyrównanie elementów: środek;
justify-content: środek;
rozmiar czcionki: 18 pikseli;
grubość czcionki: pogrubiona;
kolor: #49518c;
}

Możesz określić wartość wysokości wiersza w taki sam sposób, w jaki określasz dowolny inny rozmiar w CSS – jako liczbę, rozmiar w pikselach lub wartość procentową.

Wyrównanie z właściwością transformacji

A teraz doszliśmy do najbardziej ekstremalnej metody, ale nie do najnowszego zastosowania w projektowaniu stron internetowych. Tutaj wszystko jest proste, musisz przesunąć określony element w pionie do potrzebnej wartości. Nieruchomość przekształcać, jest to lista przekształceń, które instalator stosuje podczas instalacji pakietu. Instalator stosuje przekształcenia w tej samej kolejności, w jakiej są one określone we właściwości.

CSS

Vertical-medilpasudsa (
obramowanie: 2 piksele ciągłe #e00a0a;
wysokość: 158px;
rozmiar czcionki: 19px;
grubość czcionki: pogrubiona;
kolor: #353c71;
}
.vertical-medilpasudsa > div(
pozycja: względna;
góra: 50%;
transformacja: tłumaczenieY(-50%);
wyrównanie tekstu:środek;
}

Gdy określisz wartości jako liczbę, jako podstawę zostanie użyty bieżący rozmiar czcionki. Bieżący rozmiar czcionki jest mnożony przez określoną liczbę, aby obliczyć wysokość linii lub odstęp między wierszami.

Jeśli chcesz wyśrodkować znaki w elemencie w poziomie, powinieneś użyć text-align: center. Jedną z opcji jest to, że jeśli chcesz wyśrodkować go w pionie i masz stałą stopkę nagłówka i jeden wiersz tekstu, ustaw wysokość linii na taką samą, jak wysokość stopki.

Jeśli chcesz wyśrodkować tekst wewnątrz elementu, takiego jak element div, nagłówek lub akapit, możesz użyć właściwość wyrównania tekstu CSS.

Text-align ma kilka prawidłowych właściwości:

Centrum: Tekstura jest wyśrodkowana;
lewy: Zostanie wyrównany do lewej strony kontenera;
Prawidłowy: Wyrównane do prawej strony pojemnika
uzasadniać: Wymuszone do wyrównania zarówno z lewą, jak i prawą krawędzią pojemnika, z wyjątkiem linii najbardziej zewnętrznych;
uzasadnij wszystko: Sprawia, że ​​skrajna linia uzasadnia znaki;
początek: To samo co po lewej stronie, tylko jeśli kierunek idzie od lewej do prawej. Ale będzie to poprawne, jeśli początkowo ustawisz kierunek tekstu, który będzie się odbywał od prawej do lewej;
Koniec: Przeciwieństwo początku;
Twoi rodzice: Podobnie jak w przypadku dziedziczenia, z wyjątkiem początku i końca, jest ono obliczane względem elementu nadrzędnego;

Użyj tych właściwości, aby wyrównać tekst w elemencie nadrzędnym lub opakowaniu div. Jeśli chcesz wyśrodkować tekst w elemencie w poziomie, powinieneś użyć text-align: center.

Jedną z opcji jest to, że jeśli chcesz wyśrodkować go w pionie, jeśli masz stałą stopkę nagłówka i jeden wiersz tekstu, ustaw wysokość linii na taką samą, jak wysokość stopki.