Dom Naprawa Wszystko o wyrównaniu CSS. Jak zrobić wyrównanie tekstu w środku, szerokość, krawędzie strony w HTML

Wszystko o wyrównaniu CSS. Jak zrobić wyrównanie tekstu w środku, szerokość, krawędzie strony w HTML

Do tej pory wyrównaliśmy tylko elementy do lewej. Dokładniej, w ogóle tego nie zrobiliśmy, a sama przeglądarka domyślnie wyrównuje elementy do lewej. Oczywiście byłoby zbyt nudno, aby wszystko wyrównać w lewo. Dlatego istnieją różne drogi wyrównanie do środka i do prawej.

Dopasowywanie elementów to coś, co musisz tylko wiedzieć, kiedy. Pierwszą rzeczą do zrobienia jest wpisanie najprostszej strony.

Dawno, dawno temu był tag

Nie radzę używać go teraz, ze względu na obecność więcej nowoczesne sposoby ale nie mogę się powstrzymać, by o tym nie wspomnieć. Korzystanie z niego jest bardzo, bardzo proste. Wszystko, czego potrzebujesz do wyrównania, wstawiasz do tego znacznika. Tutaj, na przykład, tutaj wyrównujemy nagłówek 1. poziomu w środku.



Możesz również dodać obraz wyśrodkowany, przejdźmy również do następnej linii za pomocą tagu
:


Wyśrodkowany nagłówek poziomu 1




To był tag

, który jest już przestarzały, w dodatku wbrew Twoim oczekiwaniom tagów oraz po prostu nie istnieje. Powiedzmy, że domyślnie wyrównane do lewej, wyśrodkowane za pomocą tagu
, ale co z tym właściwym?

Aby rozwiązać ten problem, twórcy opracowali uniwersalny sposób na wyrównanie elementów. HTML. Metoda polega na wykorzystaniu tzw. kontenerów, które tworzone są za pomocą tagu

. Oznacza to, że wszystko, co trzeba umieścić w konkretnym pojemniku, znajduje się wewnątrz tagu
. A ten tag ma już atrybut „ wyrównywać", którego wartość określa pozycję tego kontenera. Istnieją trzy wartości: " lewy", "środek", "prawo". Wartość domyślna to " lewy Jednak nie sądzę, żeby cię to zaskoczyło.

Napiszmy teraz to samo Kod HTML, ale za pomocą pojemników dodatkowo wyrównajmy nie do środka, ale do prawej.





Jak widać, wszystko działa. Radzę również zmienić wartość atrybutu " wyrównywać”, aby przyjrzeć się innym rodzajom wyrównywania zawartości kontenera.

Kolejny sposób na wyrównanie elementów HTML- to są tabele, ale ten temat zasługuje na osobną dyskusję, więc porozmawiamy o tym w jednym z kolejnych artykułów.

Na razie Twoja strona powinna wyglądać tak:






Wyśrodkowany nagłówek poziomu 1






Nagłówek poziomu 1, wyrównany do prawej






Z poważaniem Michaił Rusakow.

PS Jeśli chcesz dowiedzieć się więcej HTML to spójrz na mój bezpłatny kurs z przykładem tworzenia strony internetowej HTML:

18.02.15 21,4K

Jeśli wytniesz jakąkolwiek witrynę utworzoną w dniu oparty na html, zobaczysz pewną strukturę warstwową. I ich wygląd zewnętrzny będzie podobny do ciasta warstwowego. Jeśli tak uważasz, to najprawdopodobniej nie jadłeś od dawna. Więc najpierw zaspokój swój głód, a potem pokażemy Ci, jak wyśrodkować warstwę div w Twojej witrynie:

Zalety układu za pomocą tagu

Istnieją dwa główne typy budowania struktury witryny:

  • tabelaryczny;
  • Blok.

Układ tabelaryczny dominuje od zarania Internetu. Do jego zalet należy dokładność zadanego pozycjonowania. Niemniej jednak ma oczywiste wady. Główne z nich to objętość kodu i niska prędkość pliki do pobrania.

W przypadku korzystania z układu tabelarycznego strona internetowa nie zostanie wyświetlona, ​​dopóki nie zostanie w pełni załadowana. Natomiast w przypadku korzystania z bloków div elementy są renderowane natychmiast.

Oprócz wysoka prędkość Pobieranie blokowa konstrukcja strony pozwala kilkakrotnie zmniejszyć głośność Kod HTML. W tym poprzez użycie klas CSS.

Jednak układ tabelaryczny powinien być używany do strukturyzowania wyświetlania danych na stronie. Klasycznym przykładem jego zastosowania jest ekspozycja stołów.

Budowanie bloków na podstawie tagów

zwany także warstwami, a same bloki są warstwami. Dzieje się tak, ponieważ podczas korzystania z niektórych wartości właściwości można je umieszczać jedna na drugiej, podobnie jak warstwy w Photoshopie.

Pomoce w pozycjonowaniu

W układzie blokowym pozycjonowanie warstw najlepiej wykonywać za pomocą kaskadowych arkuszy stylów. Główna właściwość CSS odpowiedzialna za stanowisko

, jest pływakiem.
Składnia właściwości:
pływak: w lewo | prawo | brak | dziedziczyć,
Gdzie:

  • left — wyrównuje element do lewej krawędzi ekranu. Pozostałe elementy zawijają się w prawo;
  • prawo - wyrównanie po prawej stronie, zawijanie pozostałych elementów - po lewej;
  • brak - owijanie nie jest dozwolone;
  • dziedzicz - dziedziczenie wartości element nadrzędny.

Rozważ lekki przykład pozycjonowania div przy użyciu tej właściwości:

Lewy blok


Teraz spróbujmy użyć tej samej właściwości do umieszczenia trzeciego elementu div na środku strony. Ale niestety float nie ma wartości środkowej. A kiedy nowy blok otrzymuje wartość wyrównania w prawo lub w lewo, przesuwa się w określonym kierunku. Dlatego pozostaje tylko ustawić wszystkie trzy bloki jako pływające: left :


Ale to też nie jest najlepsza opcja. Gdy okno jest zmniejszane, wszystkie warstwy układają się w jednym rzędzie w pionie, a gdy rozmiar jest zwiększany, przyklejają się do lewej krawędzi okna. Potrzebujemy więc lepszego sposobu na wyśrodkowanie divów.

Warstwy centrujące

W poniższym przykładzie użyjemy warstwy kontenera do umieszczenia pozostałych elementów. Rozwiązuje to problem przesuwania się bloków względem siebie, gdy rozmiar okna jest zmieniany. Centrowanie kontenera na środku odbywa się poprzez ustawienie właściwości marginesu zerowa wartość marginesy od góry i auto po bokach (margines: 0 auto ):

Lewy blok

blok centralny


Ten sam przykład pokazuje, jak wyśrodkować div w poziomie. A jeśli nieznacznie edytujesz powyższy kod, możesz osiągnąć pionowe wyrównanie bloków. Aby to zrobić, wystarczy zmienić długość warstwy kontenera (zredukować ją). Oznacza to, że po edycji swojego css klasa powinna wyglądać tak:

Po zmianie wszystkie klocki ustawią się ściśle w rzędzie pośrodku. A ich pozycja nie zmieni się w żadnym rozmiarze okna przeglądarki. Tak wygląda div wyśrodkowany w pionie:


W poniższym przykładzie, aby wyśrodkować warstwy wewnątrz kontenera, użyliśmy serii nowych właściwości CSS :


Krótki opis właściwości css i ich wartości, które zastosowaliśmy w ten przykład aby wyśrodkować div wewnątrz div :
  • display: inline-block - wyrównuje element blokowy w linię i zawija go z innym elementem;
  • vertical-align: middle - wyrównuje element w środku względem rodzica;
  • margin-left - ustawia margines do lewej.

Jak zrobić link z warstwy

Choć brzmi to dziwnie, jest to możliwe. Czasami blok div jako link może być potrzebny, gdy układ różnego rodzaju menu. Rozważ praktyczny przykład implementacji warstwy linków:

Link do naszej strony


W tym przykładzie, używając linii wyświetlania: block , ustawiamy link na wartość elementu blokowego. Aby cała wysokość elementu div stała się łączem, ustaw wysokość : 100%.

Ukrywanie i pokazywanie elementów blokowych

Elementy blokowe zapewniają więcej opcji rozszerzania funkcjonalności interfejsu niż przestarzały układ tabelaryczny. Często zdarza się, że projekt strony jest wyjątkowy i rozpoznawalny. Ale za taki ekskluzywny brak wolnego miejsca trzeba zapłacić.

Szczególnie dotyczy to strona główna, koszt reklamy jest najwyższy. W związku z tym pojawia się problem, gdzie „wcisnąć” jeszcze jednego baner reklamowy. I tutaj nie możesz uciec od wyrównania div do środka strony!

Bardziej racjonalnym rozwiązaniem jest ukrycie jakiegoś bloku. Oto prosty przykład takiej implementacji:

To jest magiczny przycisk. Kliknięcie go spowoduje ukrycie lub wyświetlenie ukrytego bloku.

Centrowanie elementów w pionie za pomocą CSS to wyzwanie dla programistów. Istnieje jednak kilka metod jego rozwiązania, które są dość proste. Ta lekcja przedstawia 6 opcji wyśrodkowania treści w pionie.

Zacznijmy ogólny opis zadania.

Problem z centrowaniem w pionie

Centrowanie w poziomie jest bardzo proste i łatwe. Gdy wyśrodkowany element jest wbudowany, użyj właściwości wyrównania względem elementu nadrzędnego. Gdy element jest elementem blokowym, ustawiamy jego szerokość i automatyczna instalacja lewy i prawy margines.

Większość osób korzystających właściwość text-align: , uzyskaj dostęp do właściwości vertical-align, aby wyśrodkować w pionie. Wszystko wygląda całkiem logicznie. Jeśli korzystałeś z szablonów tabel, prawdopodobnie szeroko używałeś atrybutu valign, co wzmacnia przekonanie, że pionowe wyrównanie jest właściwą drogą.

Ale atrybut valign działa tylko na komórkach tabeli. A właściwość vertical-align jest bardzo podobna. Wpływa również na komórki tabeli i niektóre elementy wbudowane.

Wartość właściwości vertical-align odnosi się do nadrzędnego elementu wbudowanego.

  • W wierszu tekstu wyrównanie odnosi się do wysokości wiersza.
  • Komórka tabeli wykorzystuje wyrównanie względem wartości obliczonej przez specjalny algorytm (zwykle uzyskuje się wysokość linii).

Niestety, właściwość vertical-align nie działa na elementach blokowych (takich jak akapity wewnątrz elementu div). Ta sytuacja może prowadzić do wniosku, że nie ma rozwiązania problemu wyrównania w pionie.

Istnieją jednak inne metody centrowania elementów blokowych, których wybór zależy od tego, co jest centrowane względem pojemnika zewnętrznego.

metoda wysokości linii

Ta metoda działa, gdy chcesz wyśrodkować w pionie jeden wiersz tekstu. Wszystko, co musisz zrobić, to ustawić wysokość linii na większą niż rozmiar czcionki.

Domyślnie wolne miejsce zostanie rozłożone równomiernie nad i pod tekstem. Linia zostanie wyśrodkowana w pionie. Często wysokość linii jest równa wysokości elementu.

HTML:

Pożądany tekst

CSS:

#dziecko ( wysokość linii: 200px; )

Ta metoda działa we wszystkich przeglądarkach, chociaż może być używana tylko dla jednej linii. Wartość 200 px w przykładzie została wybrana arbitralnie. Możesz użyć dowolnej wartości większej niż rozmiar czcionki tekstu.

Centrowanie obrazu z wysokością linii

A jeśli treść jest obrazem? Czy powyższa metoda zadziała? Odpowiedź kryje się w kolejnej linii kodu CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Wartość właściwości line-height musi być większa niż wysokość obrazu.

Metoda tabeli CSS

Jak wspomniano powyżej, właściwość vertical-align dotyczy komórek tabeli, gdzie działa świetnie. Możemy wyrenderować nasz element jako komórkę tabeli i użyć na nim właściwości vertical-align, aby wyśrodkować zawartość w pionie.

Notatka: Tabela CSS to nie to samo, co tabela HTML.

HTML:

Zawartość

CSS:

#parent (display: table;) #child ( display: table-cell; vertical-align: middle; )

Ustawiamy dane wyjściowe tabeli na nadrzędny element div i renderujemy zagnieżdżony element div jako komórkę tabeli. Teraz możesz użyć właściwości vertical-align na wewnętrznym kontenerze. Wszystko w nim będzie wyśrodkowane w pionie.

W przeciwieństwie do powyższej metody, w tym przypadku zawartość może być dynamiczna, ponieważ element div zmieni swój rozmiar, aby dopasować się do jego zawartości.

Wadą tej metody jest to, że nie działa w starszych wersjach IE. Musisz użyć właściwości display: inline-block dla zagnieżdżonego kontenera.

Pozycjonowanie bezwzględne i ujemne marże

Ta metoda działa również we wszystkich przeglądarkach. Wymaga to jednak, aby wyśrodkowany element miał wysokość.

Przykładowy kod wykonuje jednocześnie centrowanie w poziomie i w pionie:

HTML:

Zawartość

CSS:

#parent (pozycja: względna;) #child ( pozycja: bezwzględna; góra: 50%; lewa: 50%; wysokość: 30%; szerokość: 50%; margines: -15% 0 0 -25%; )

Najpierw ustalamy typ pozycjonowania elementów. Następnie w zagnieżdżonym div ustaw właściwości top i left na 50%, czyli środek elementu rodzica. Ale środek uderza w lewą stronę górny róg zagnieżdżony element. Dlatego trzeba go podnieść (o połowę wysokości) i przesunąć w lewo (o połowę szerokości), a wtedy środek zbiegnie się ze środkiem elementu rodzica. W tym przypadku konieczna jest więc znajomość wysokości elementu. Następnie nadajemy elementowi ujemny górny i lewy margines równy odpowiednio połowie wysokości i szerokości.

Ta metoda nie działa we wszystkich przeglądarkach.

Pozycjonowanie i rozciąganie bezwzględne

Przykładowy kod wykonuje centrowanie w pionie i poziomie.

HTML:

Zawartość

CSS:

#parent (pozycja: względna;) #child ( pozycja: bezwzględna; góra: 0; dół: 0; lewy: 0; prawy: 0; szerokość: 50%; wysokość: 30%; margines: auto; )

Ideą tej metody jest rozciągnięcie zagnieżdżonego elementu do wszystkich 4 granic elementu nadrzędnego przez ustawienie właściwości top, bottom, right i left na 0.

Ustawienie automatycznego tworzenia marginesów ze wszystkich stron spowoduje wykonanie zadania równe wartości na wszystkich 4 bokach i przeniesie nasz zagnieżdżony element div do środka elementu rodzica.

Niestety ta metoda nie działa w IE7 i niższych.

Równa wyściółka na górze i na dole

Ta metoda jawnie ustawia równe dopełnienie powyżej i poniżej elementu nadrzędnego.

HTML:

Zawartość

CSS:

#rodzic ( dopełnienie: 5% 0; ) #dziecko ( dopełnienie: 10% 0; )

W kodzie Przykład CSS Marginesy górny i dolny są ustawione dla obu elementów. W przypadku elementu zagnieżdżonego ustawienie wypełnienia posłuży do wyśrodkowania go w pionie. A dopełnienie elementu nadrzędnego wyśrodkuje w nim zagnieżdżony element.

Jednostki względne służą do dynamicznej zmiany rozmiaru elementów. A dla bezwzględnych jednostek miary będziesz musiał wykonać obliczenia.

Na przykład, jeśli element nadrzędny ma wysokość 400 pikseli, a element zagnieżdżony ma wysokość 100 pikseli, wymagane jest wypełnienie 150 pikseli na górze i na dole.

150 + 150 + 100 = 400

Użycie % pozwala na pozostawienie obliczeń przeglądarce.

Ta metoda działa wszędzie. Minusem jest konieczność wykonywania obliczeń.

Notatka: Ta metoda działa poprzez ustawienie marginesu elementu. Możesz także używać marginesów w elemencie. Decyzję o zastosowaniu marginesów lub dopełnienia należy podjąć w zależności od specyfiki projektu.

pływający div

Ta metoda wykorzystuje pusty element div, który pływa i pomaga kontrolować pozycję naszego zagnieżdżonego elementu w dokumencie. Zauważ, że pływający div jest umieszczony przed naszym zagnieżdżonym elementem w kodzie HTML.

HTML:

Zawartość

CSS:

#parent (height: 250px;) #floater ( float: left; height: 50%; width: 100%; margin-bottom: -50px; ) #child ( clear: both; height: 100px; )

Przesuwamy pusty div w lewo lub w prawo i nadajemy mu wysokość 50% elementu rodzica. W ten sposób wypełni górną połowę elementu rodzica.

Ponieważ ten div jest pływający, jest usuwany z normalnego przepływu dokumentu i musimy rozwinąć zagnieżdżony element. W przykładzie użyto clear: both , ale wystarczy użyć tego samego kierunku, co przesunięcie pływającego pustego elementu div.

Górna granica zagnieżdżonego elementu div znajduje się bezpośrednio pod dolną krawędzią pustego elementu div. Musimy przesunąć zagnieżdżony element w górę o połowę wysokości pływającego pustego elementu. Aby rozwiązać ten problem, używana jest ujemna wartość właściwości margin-bottom dla pływającego pustego elementu div.

Ta metoda działa również we wszystkich przeglądarkach. Jednak korzystanie z niego wymaga dodatkowego pustego elementu div oraz znajomości wysokości elementu zagnieżdżonego.

Wniosek

Wszystkie opisane metody są łatwe w użyciu. Trudność polega na tym, że żaden z nich nie nadaje się do wszystkich przypadków. Konieczna jest analiza projektu i wybór tego, który najlepiej odpowiada wymaganiom.

Projektanci stron internetowych używają DIV na co dzień w pracy. Bez przesady jest to najpopularniejszy tag. Otwórz źródło dowolnej witryny, a zobaczysz, że większość, jeśli nie dwie trzecie obiektów jest zamkniętych w

. Nawet wraz z pojawieniem się HTML5 i pojawieniem się poważnych konkurentów w postaci artykułu lub nagłówka nadal jest on wszędzie umieszczany w znacznikach. Dlatego proponuję zająć się kwestią formatowania i wyrównywania bloków div w środku.

Co to jest DIV

Nazwa elementu pochodzi od angielskiego słowa Division, które oznacza podział. Podczas pisania znaczników służy do dzielenia elementów na bloki. DIV zawierają grupy treści na stronie internetowej. Na przykład obrazy, akapity z tekstem. Tag w żaden sposób nie wpływa na wyświetlanie treści i nie przenosi żadnego obciążenia semantycznego.

DIV obsługuje wszystkie atrybuty globalne. Ale do projektowania stron internetowych potrzebujesz tylko dwóch - klasy i identyfikatora. O całej reszcie zapamiętasz tylko w egzotycznych przypadkach, a to nie jest fakt. Atrybut align, który był używany do wyśrodkowania lub wyrównywania do lewej elementu div, jest przestarzały.

Kiedy używać DIV

Wyobraź sobie, że strona to lodówka, a DIV to plastikowe pojemniki, według których musisz sortować zawartość. Nie włożysz owoców do tego samego pojemnika co pasztetowa. Każdy rodzaj produktu wkładasz osobno. Treści internetowe są generowane w podobny sposób.

Otwórz dowolną witrynę i podziel ją na semantyczne bloki. Nagłówek u góry, stopka u dołu, główny tekst w środku. Z boku zwykle znajduje się mniejsza kolumna z treściami promocyjnymi lub chmura tagów.

dokument

Teraz zdemontuj każdą sekcję bardziej szczegółowo. Zacznij od nagłówka. Nagłówek witryny ma osobne logo, nawigację, nagłówek pierwszego poziomu, a czasem slogan. Przypisz własny kontener do każdego bloku semantycznego. To nie tylko rozdzieli elementy w przepływie, ale także ułatwi ich formatowanie. Znacznie łatwiej będzie wyśrodkować obiekt w znaczniku DIV, nadając mu klasę lub identyfikator.

Wyśrodkuj Wyrównaj DIV z marginesami

Podczas renderowania elementów internetowych przeglądarka uwzględnia trzy właściwości: dopełnienie, marginesy i obramowanie. padding to przestrzeń między treścią a jej granicą. Margines - pola oddzielające jeden obiekt od drugiego. Granica to linie wzdłuż bloków. Mogą być przypisane od razu ze wszystkich lub tylko z jednej strony:

div(obramowanie: 1px solid #333; obramowanie po lewej: brak; )

Te właściwości dodają wolną przestrzeń między obiektami, a także pomagają je wyrównać i umieścić zgodnie z potrzebami. Na przykład, jeśli blok z obrazem musi być przesunięty od lewej krawędzi do środka o 20%, przypiszesz lewy margines do elementu o wartości 20%:

Blokuj z img (margines lewy: 20%; )

Elementy można również formatować za pomocą ich wartości szerokości i ujemnego dopełnienia. Na przykład jest blok o wymiarach 200px na 200px. Najpierw przypisz mu pozycję bezwzględną i przesuń go do środka o 50%.

Div( pozycja: bezwzględna; po lewej: 50%; )

Teraz, aby upewnić się, że DIV jest idealnie wyśrodkowany, nadaj mu ujemne lewe dopełnienie równe 50% jego szerokości, tj. -100 pikseli:

margines lewy: -100px

W CSS nazywa się to „usuwaniem powietrza”. Ma jednak istotną wadę polegającą na konieczności wykonywania ciągłych obliczeń, co jest dość trudne w przypadku elementów z kilkoma poziomami zagnieżdżenia. Jeśli ustawione są dopełnienie i szerokość obramowania, przeglądarka domyślnie obliczy wymiary kontenera jako sumę grubości obramowania, dopełnienia po prawej i lewej stronie oraz samej zawartości, co również może być niespodzianką.

Więc kiedy musisz wyśrodkować DIV, użyj właściwości box-sizing z wartością border-box. Uniemożliwi to przeglądarce dodanie wartości dopełnienia i obramowania do całkowitej szerokości elementu DIV. Aby podnieść lub obniżyć element, użyj również wartości ujemnych. Ale w tym przypadku można je przypisać do górnego lub dolnego pola kontenera.

Jak wyśrodkować blok div za pomocą automatycznych marginesów

Jest to łatwy sposób na wyśrodkowanie dużych bloków. Wystarczy ustawić szerokość kontenera i właściwość margin na auto. Przeglądarka umieści blok na środku z takimi samymi marginesami po lewej i prawej stronie, wykonując całą pracę samodzielnie. Dzięki temu nie ryzykujesz pomylenia się w obliczeniach matematycznych i znacznie oszczędzasz swój czas.

Użyj metody automatycznego marginesu podczas tworzenia responsywnych aplikacji. Kluczem jest nadanie kontenerowi wartości szerokości w emach lub procentach. Kod z powyższego przykładu wyśrodkuje DIV na dowolnym urządzeniu, w tym Telefony komórkowe, zajmie 90% ekranu.

Wyrównanie za pomocą wyświetlacza właściwości: inline-block

Domyślnie elementy DIV są uważane za elementy blokowe i mają wyświetlaną wartość blokową. W przypadku tej metody będziesz musiał zastąpić tę właściwość. Nadaje się tylko do DIV z kontenerem nadrzędnym:

Dowolny tekst

Element z klasą external-div ma przypisaną właściwość text-align z wartością center, która wyśrodkowuje tekst wewnątrz. Ale na razie przeglądarka widzi zagnieżdżony DIV jako obiekt blokowy. Aby właściwość text-align działała, inner-div musi być traktowana jako inline. Dlatego w Tabela CSS dla selektora inner-div piszesz następujący kod:

Inner-div (wyświetlanie: inline-block; )

Zmieniasz właściwość wyświetlania z bloku na blok w wierszu.

metoda transformacji/tłumaczenia

Kaskadowe arkusze stylów umożliwiają dowolne przesuwanie, pochylanie, obracanie i przekształcanie elementów internetowych. W tym celu używana jest właściwość transform. Pożądany typ przekształcenia i stopień są określone jako wartości. W tym przykładzie będziemy pracować z translatorem:

transformacja: przetłumacz(50%, 50%);

Funkcja translate przesuwa element z jego aktualnej pozycji w lewo/prawo i góra/dół. W nawiasach podano dwie wartości:

  • stopień ruchu poziomego;
  • stopień ruchu pionowego.

Jeśli element ma być przesunięty tylko wzdłuż jednej z osi współrzędnych, to po słowie tłumaczenia podajesz nazwę osi i w nawiasach wielkość wymaganego przesunięcia:

Przekształć: przetłumaczY(-20%);

W niektórych przewodnikach możesz zobaczyć transformację z prefiksami dostawcy:

webkit-transform: translate(50%, 50%); -ms-transform: przetłumacz (50%, 50%); transformacja: przetłumacz(50%, 50%);

W 2018 roku nie jest to już konieczne, usługa jest obsługiwana przez wszystkie przeglądarki, w tym Edge i IE.

Aby wyśrodkować DIV, którego potrzebujemy, funkcja translate CSS jest napisana z wartością 50% dla osi pionowej i poziomej. Spowoduje to, że przeglądarka przesunie element z jego aktualnej pozycji do połowy jego szerokości i wysokości. Należy określić właściwości szerokości i wysokości:

dokument

Oto tekst

Pamiętaj, że element, do którego zastosowano właściwość transform, porusza się niezależnie od otaczających go obiektów. Z jednej strony jest to wygodne, ale czasami poruszające się, DIV może zachodzić na inny pojemnik. Dlatego ta metoda centrowania elementów środnikowych jest uważana za niestandardową i jest stosowana tylko w przypadkach skrajnej konieczności. Do animacji wykorzystywane są transformacje zgodne ze wszystkimi kanonami CSS.

Praca z układem Flexbox

Rozważany jest Flexbox w skomplikowany sposób układy stron internetowych. Ale jeśli ją opanujesz, zrozumiesz, że jest to o wiele łatwiejsze i przyjemniejsze niż standardowe sposoby formatowanie. Specyfikacja Flexbox to elastyczny i niezwykle wydajny sposób obsługi elementów. Z języka angielskiego Nazwa modułu jest tłumaczona jako „elastyczny kontener”. Wartości szerokości, wysokości, rozmieszczenia elementów są dopasowywane automatycznie, bez obliczania wcięć i marginesów.

W poprzednich przykładach pracowaliśmy już z właściwością wyświetlania, ale ustawiliśmy ją na wartości block (block) i inline (inline-block). Do tworzenia układów flex użyjemy display: flex. Najpierw potrzebujemy kontenera elastycznego:

Aby przekonwertować go na elastyczny kontener w tabelach kaskadowych, piszemy:

Flex-kontener (wyświetlacz: flex; )

Wszystkie obiekty w nim zagnieżdżone, ale tylko bezpośrednie dzieci, będą elementami elastycznymi:

Pierwszy
Drugi
Trzeci
Czwarty

Jeśli lista jest umieszczona wewnątrz kontenera elastycznego, elementy na liście li nie są uważane za elementy elastyczne. Układ Flexbox będzie działał tylko na ul:

Zasady umieszczania elementów elastycznych

Aby zarządzać elementami elastycznymi, potrzebujesz justify-content i align-items. W zależności od określonych wartości, te dwie właściwości automatycznie pozycjonują obiekty zgodnie z potrzebami. Jeśli potrzebujemy wyśrodkować wszystkie zagnieżdżone DIV, piszemy justify-content: center, align-items: center i nic więcej. Przeglądarka wykona resztę pracy:

dokument

Pierwszy
Drugi
Trzeci
Czwarty

Aby wyśrodkować tekst na elementach DIV, które są elementami elastycznymi, możesz użyć standardowej sztuczki z wyrównywaniem tekstu. Możesz też uczynić każdy zagnieżdżony element DIV elastycznym kontenerem i zarządzać zawartością za pomocą justify-content . Ta metoda jest znacznie bardziej racjonalna, jeśli zawiera różne treści, w tym grafikę, inne obiekty zagnieżdżone, w tym listy wielopoziomowe.

Każdy projektant layoutów nieustannie staje przed koniecznością wyrównania treści w bloku: w poziomie lub w pionie. Jest kilka dobrych artykułów na ten temat, ale wszystkie oferują wiele interesujących, ale niewiele praktycznych opcji, dlatego trzeba poświęcić dodatkowy czas na podkreślenie najważniejszej rzeczy. Postanowiłem przesłać te informacje w dogodnej dla mnie formie, aby już nie googlować.

Wyrównywanie bloków o znanych rozmiarach

Najłatwiejszym sposobem użycia CSS jest wyrównanie pól, które mają określoną wysokość (dla wyrównania w pionie) lub szerokość (dla wyrównania w poziomie).

Wyrównanie z dopełnieniem

Czasami nie można wyśrodkować elementu, ale dodać do niego obramowanie za pomocą właściwości " wyściółka".

Na przykład jest obrazek 200 na 200 pikseli i chcesz go wyśrodkować w bloku 240 na 300. Możemy ustawić wysokość i szerokość jednostka zewnętrzna= 200px i dodaj 20 pikseli dla góry i dołu oraz 50 dla lewej i prawej strony.

.example-wrapper1 ( tło : #535E73 ; szerokość : 200px ; wysokość : 200px ; dopełnienie : 20px 50px ; )

Wyrównywanie bloków absolutnie pozycjonowanych

Jeśli blok jest ustawiony na „ pozycja: bezwzględna”, następnie można go ustawić względem najbliższego rodzica za pomocą „position: relative”. W tym celu wszystkie właściwości (” Top","prawo","na dole","lewy") bloku wewnętrznego, aby przypisać tę samą wartość, a także "margin: auto".

*Istnieje niuans: Szerokość (wysokość) bloku wewnętrznego + wartość lewej (prawej, dolnej, górnej) nie może przekraczać rozmiaru bloku nadrzędnego. Bezpieczniej jest ustawić lewe (prawe, dolne, górne) właściwości na 0 (zero).

.example-wrapper2 ( position : relative ; height : 250px ; background : url(space.jpg) ; ) 0 ; right : 0 ; margin : auto ; background : url(king.png) ; )

Wyrównanie w poziomie

Wyrównanie z „text-align: center”

Aby wyrównać tekst w bloku, istnieje specjalna właściwość „ wyrównanie tekstu". Po ustawieniu na " środek" każda linia tekstu zostanie wyrównana poziomo. Dla tekst wielowierszowy to rozwiązanie jest stosowane niezwykle rzadko, częściej można znaleźć tę opcję do wyrównywania przęseł, łączy lub obrazków.

Kiedyś musiałem wymyślić tekst, aby pokazać, jak działa wyrównanie tekstu, kiedy Pomoc CSS ale nic ciekawego nie przyszło mi do głowy. Początkowo postanowiłem gdzieś skopiować wierszyk, ale pamiętałem, że może to zepsuć wyjątkowość artykułu, a nasi drodzy czytelnicy nie będą mogli go znaleźć w Google. A potem postanowiłem napisać ten akapit tutaj – w końcu nie chodzi o niego, ale o to, że jest w zgodzie.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Warto zauważyć, że ta właściwość będzie działać nie tylko dla tekstu, ale także dla dowolnych elementów inline („display: inline”).

Ale ten tekst jest wyrównany do lewej, ale znajduje się w bloku, który jest wyśrodkowany względem opakowania.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left; background : #FFE5E5 ; )

Wyrównywanie bloków z marginesami

Elementy blokowe o znanej szerokości można łatwo wyrównać w poziomie, ustawiając je na „margin-left: auto; margin-right: auto”. Skrót jest zwykle używany: „ margines: 0 auto" (zamiast zera może być dowolna wartość). Ale w przypadku wyrównania w pionie ta metoda nie zadziała.

.lama-wrapper (wysokość: 200px; tło: #F1BF88;) .lama1 (wysokość: 200px; szerokość: 200px; tło: url(lama.jpg); margines: 0 auto;)

W ten sposób warto wyrównać wszystkie bloki tam, gdzie to możliwe (gdzie pozycjonowanie stałe lub bezwzględne nie jest wymagane) – jest to najbardziej logiczne i adekwatne. Choć wydaje się to oczywiste, od czasu do czasu widziałem onieśmielające przykłady z negatywnymi wcięciami, więc pomyślałem, że wyjaśnię.

Wyrównanie w pionie

Z wyrównaniem w pionie jest znacznie więcej problemów - najwyraźniej nie było to przewidziane w CSS. Istnieje kilka sposobów na osiągnięcie pożądanego rezultatu, ale wszystkie nie są zbyt piękne.

Wyrównanie z właściwością wysokości linii

W przypadku, gdy w bloku jest tylko jedna linia, można uzyskać jej wyrównanie w pionie, stosując „ Wysokość linii" i ustawiając go na żądaną wysokość. Dla bezpieczeństwa należy również ustawić "height", którego wartość będzie równa wartości "line-height", ponieważ ta ostatnia nie jest obsługiwana we wszystkich przeglądarkach.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

Możliwe jest również wyrównanie bloku wieloma liniami. Aby to zrobić, będziesz musiał użyć dodatkowego bloku owijającego i ustawić do niego wysokość linii. Blok wewnętrzny może być wielowierszowy, ale musi być „w wierszu”. Musisz zastosować do niego „vertical-align: middle”.

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; )

Blok opakowania musi mieć ustawioną wartość „rozmiar czcionki: 0”. Jeśli nie ustawisz rozmiaru czcionki na zero, przeglądarka doda kilka dodatkowych pikseli. Będziesz także musiał określić rozmiar czcionki i wysokość linii dla bloku wewnętrznego, ponieważ te właściwości są dziedziczone z rodzica.

Wyrównanie w pionie w tabelach

Nieruchomość " wyrównanie w pionie" wpływa również na komórki tabeli. Gdy wartość jest ustawiona na "middle", zawartość wewnątrz komórki jest wyśrodkowana. Oczywiście układ tabelaryczny jest obecnie uważany za archaiczny, ale w wyjątkowych przypadkach można go zasymulować, określając " wyświetlacz: tabela-komórka".

Zwykle używam tej opcji do wyrównania w pionie. Poniżej przykładowy layout zaczerpnięty z gotowego projektu. Interesujący jest obraz wyśrodkowany w pionie w ten sposób.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max-width : 100 % ; minimalna szerokość : 140px ; wyświetlanie : blok ; margines : 0 auto ; )

Należy pamiętać, że jeśli element ma ustawioną wartość „float” inną niż „none”, to nadal będzie blokowany (display: block) – wtedy trzeba będzie zastosować dodatkowy wrapper blokowy.

Wyrównanie z dodatkowym elementem wbudowanym

A w przypadku elementów wbudowanych możesz zastosować „ wyrównanie w pionie: środek". W tym przypadku wszystkie elementy z " wyświetlacz: wbudowany”, które znajdują się w tej samej linii, zostaną wyrównane ze wspólną linią środkową.

Musisz utworzyć blok pomocniczy o wysokości równej wysokości bloku rodzica, wtedy żądany blok zostanie wyśrodkowany. Wygodnie jest użyć do tego pseudoelementów:before lub:after.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; ) .riki ( display : inline-block ; height : 100% ; vertical-align : middle ; )

Wyświetlacz: elastyczność i wyrównanie

Jeśli nie zależy Ci zbytnio na użytkownikach Explorera 8 lub zależy Ci na tym, że chcesz umieścić dla nich dodatkowy JavaScript, możesz użyć "display: flex". Flex boxy naprawdę dobrze radzą sobie z problemami z wyrównaniem i wystarczy napisać "margin: auto", aby wyśrodkować zawartość w środku.

Do tej pory ta metoda praktycznie nigdy mnie nie spotkała, ale nie ma dla niej specjalnych ograniczeń.

.example-wrapper7 ( display : flex ; height : 300px ; background : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

Cóż, to wszystko, o czym chciałem napisać Wyrównanie CSS. Teraz centrowanie treści nie będzie problemem!

2022 bar812.ru. Tylko o kompleksie. Programy. Żelazo. Internet. Okna