Wyrównanie środka DIV

. Nawet po pojawieniu się HTML5 i pojawieniu się poważnych konkurentów w postaci artykułu lub nagłówka, nadal jest on wszędzie wstawiany do znaczników. Dlatego sugeruję, abyś poradził sobie z kwestią formatowania i dopasowywania elementów div w środku.

Czym jest div?

Nazwa elementu pochodzi od angielskiego słowa dzielącego, co oznacza podział. Podczas pisania znacznika służy on do podziału elementów na bloki. Element div zawiera grupy treści na stronie internetowej. Na przykład obrazy, akapity z tekstem. Tag nie wpływa na wyświetlanie treści i nie przenosi żadnych obciążeń semantycznych.

DIV obsługuje wszystkie globalne atrybuty. Ale do projektowania stron internetowych potrzebujesz tylko dwóch - jest to klasa i identyfikator. Cała reszta, którą zapamiętasz tylko w egzotycznych przypadkach, a to nie jest fakt. Atrybut align, który był wcześniej używany do wyśrodkowania elementu div lub lewego, jest przestarzały.

Kiedy używać div

Wyobraź sobie, że witryna to lodówka, a DIV to plastikowe pojemniki, dzięki którym musisz sortować zawartość. Nie będziesz wkładał owoców do jednego pojemnika z kiełbasą wątrobianą. Każdy rodzaj produktu, który wkładasz osobno. Podobnie generowana jest treść internetowa.

Otwórz dowolną witrynę, dzieląc ją na znaczące bloki. U góry czapki, pod stopką, pośrodku głównego tekstu. Z boku jest zwykle mniejsza kolumna z treścią reklamową lub chmurą tagów.

Teraz rozmontuj każdą sekcję bardziej szczegółowo. Zacznij od nagłówka. Nagłówek strony ma oddzielne logo, nawigację, nagłówek pierwszego poziomu, czasem hasło. Przypisz swój kontener do każdego bloku semantycznego. Więc nie tylko oddzielasz elementy w strumieniu, ale także ułatwiasz ich formatowanie. Znacznie łatwiej będzie wyrównać obiekt w znaczniku DIV w środku, przypisując mu klasę lub identyfikator.

Wyrównanie środka DIV za pomocą marginesów

Podczas przetwarzania elementów sieciowych przeglądarka uwzględnia trzy właściwości: padding, marge i border. Wyściółka wypełniająca to przestrzeń między zawartością a jej obszarem. Margin - pola oddzielające jeden obiekt od drugiego. Granica jest linią wzdłuż bloków. Mogą być przypisane natychmiastowo ze wszystkich lub tylko z jednej strony:

 div{border: 1px solid #333;border-left: none;} 

Te właściwości dodają wolną przestrzeń między obiektami, a także pomagają im wyrównać i umieścić w razie potrzeby. Na przykład, jeśli blok z obrazem musi zostać przesunięty z lewej krawędzi do środka o 20%, przypisuje się lewemu elementowi marginesu wartość 20%:

 .block-with-img{margin-left: 20%;} 

Elementy można również formatować za pomocą ich szerokości i ujemnych wcięć. Na przykład istnieje blok o wymiarach 200 na 200 pikseli. Najpierw przypisujemy mu bezwzględne pozycjonowanie i przesuwamy go do środka o 50%.

 div{position: absolute;left: 50%;} 

Teraz, aby DIV był idealnie usytuowany w środku, dajemy mu ujemne wcięcie w lewo, równe 50% jego szerokości, czyli -100 pikseli:

 margin-left: -100px; 

W CSS ta metoda nazywa się "usuwanie powietrza". Ma jednak znaczącą wadę w konieczności dokonywania stałych obliczeń, co jest dość trudne w przypadku elementów z kilkoma poziomami zagnieżdżania. Jeśli ustawisz dopełnienie i szerokość obramowania, domyślna przeglądarka obliczy rozmiar kontenera jako sumę grubości krawędzi, wypełnienia w prawo, w lewo i samej treści w środku, co również może być zaskoczeniem.

Kiedy więc chcesz wyśrodkować DIV, użyj właściwości box-sizing z wartością ramki border-box. Nie zezwoli przeglądarce na dodawanie wcięć i obramowań do całkowitej szerokości elementu DIV. Aby podnieść lub obniżyć element, zastosuj również wartości ujemne. Ale możesz przypisać je w tym przypadku do górnego lub dolnego pola kontenera.

Jak wyrównać blok DIV w centrum za pomocą pól automatycznych

Jest to łatwy sposób na centrowanie dużych bloków. Po prostu przypisujesz szerokość kontenera i właściwość margin do automatycznego. Przeglądarka umieszcza blok w środku z tymi samymi polami po lewej i prawej stronie, wykonując całą pracę samodzielnie. W rezultacie nie ryzykujesz uwikłania się w obliczenia matematyczne i znacznie oszczędzasz czas.

 div{width: 90%;margin: 0 auto;} 

Użyj metody auto-field podczas tworzenia aplikacji responsywnych. Najważniejsze, aby przypisać kontenerowi wartość szerokości w em lub procencie. Kod z powyższego przykładu centrowania DIV w centrum i na dowolnym urządzeniu, w tym telefony komórkowe, zajmie 90% ekranu.

Wyrównanie poprzez wyświetlacz: właściwość inline-block

Domyślnie elementy DIV są uznawane za blok, a ich wyświetlana wartość jest blokowa. W przypadku tej metody konieczne będzie zastąpienie tej właściwości. Pasuje tylko do div z pojemnikiem nadrzędnym:

  Dowolny tekst 

Elementowi z klasą div-div przypisuje się właściwość text-align z wartością środkową, która umieszcza tekst w środku. Ale na razie przeglądarka widzi wbudowany DIV jako obiekt blokowy. Aby właściwość text-align działała, wewnętrzny element div musi być postrzegany jako mała. Dlatego w tabeli CSS dla selektora div wewnętrznego wpisujesz następujący kod:

.inner-div{display: inline-block;} 

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

Transformuj / tłumacz metodę

Kaskadowe arkusze stylów zapewniają możliwość przesuwania, krojenia, obracania i przekształcania elementów sieci w każdy możliwy sposób. Aby to zrobić, użyj właściwości transform. Wartości wskazują pożądany typ konwersji i stopień. W tym przykładzie będziemy pracować z translate:

 transform: translate(50%, 50%); 

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

• stopień ruchu w poziomie;
• stopień ruchu w pionie.

Jeśli element musi być przesunięty tylko wzdłuż jednej z osi współrzędnych, to po słowie przetłumacz nazwę osi, aw nawiasie wartość wymaganego przesunięcia:

 transform: translateY(-20%); 

W niektórych samouczkach można znaleźć transformację za pomocą prefiksów dostawcy:

 -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); 

W 2018 r. Nie jest to już konieczne, właściwość jest obsługiwana przez wszystkie przeglądarki, w tym Edge i IE.

Aby przesunąć DIV, którego potrzebujemy w środku, funkcja translacji CSS jest napisana z wartością 50% dla osi pionowej i poziomej. W związku z tym przeglądarka przesunie element z jego aktualnej pozycji o połowę jego szerokości i wysokości. Właściwości szerokości i wysokości muszą być określone:

  Oto trochę tekstu 

Należy pamiętać, że element, do którego stosowana jest właściwość transform, porusza się niezależnie od otaczających go obiektów. Z jednej strony jest to wygodne, ale czasami w ruchu, DIV może zablokować inny pojemnik. Dlatego ta metoda centrowania elementów sieciowych jest uważana za niestandardową i jest używana tylko w nagłych wypadkach. Transformacje wszystkich kanonów CSS są używane do animacji.

Pracuj z układem Flexbox

Flexbox jest uważany za trudny sposób na układanie stron internetowych. Ale jeśli opanujesz to, zrozumiesz, że jest znacznie prostsze i przyjemniejsze niż standardowe metody formatowania. Specyfikacja Flexbox jest elastycznym i niesamowicie wydajnym sposobem obsługi przedmiotów. Z języka angielskiego nazwa modułu jest tłumaczona jako "elastyczny kontener". Wartości szerokości, wysokości i położenia elementów są dostosowywane automatycznie, bez obliczania wcięć i marginesów.

W poprzednich przykładach pracowaliśmy już z właściwością display, ale poprosiliśmy o blok (blok) i wartość łańcucha (inline-block). Aby utworzyć układy flex, użyjemy wyświetlacza: flex. Najpierw potrzebujemy pojemnika flex:

Aby przekształcić go w elastyczny kontener w tabelach kaskadowych, piszemy:

 .flex-container{display: flex;} 

Wszystkie obiekty w nim zamknięte, ale tylko bezpośredni potomkowie, będą elementami flex:

  Pierwszy 
  Drugi 
  Trzeci 
  Czwarty 

Jeśli umieścisz listę wewnątrz kontenera flex, elementy listy li nie będą traktowane jako elementy flex. Układ Flexbox będzie działał tylko w ul:

Zasady rozmieszczania Flex

Aby zarządzać elementami flex, potrzebujesz elementów justify-content i align. W zależności od podanych wartości te dwie właściwości automatycznie umieszczają obiekty w razie potrzeby. Jeśli potrzebujemy wyrównać wszystkie zagnieżdżone DIV w środku, piszemy treść justify: center, align-items: center i nic więcej. Przeglądarka wykona resztę pracy:

  Pierwszy 
  Drugi 
  Trzeci 
  Czwarty 

Aby wyrównać tekst w środku DIV, które są elementami flex, można użyć standardowej techniki wyrównania tekstu. Lub możesz utworzyć każdy zagnieżdżony element div również jako kontener elastyczny i zarządzać zawartością z zawartością uzasadnienia. Ta metoda jest znacznie bardziej racjonalna, jeśli zawiera różne treści, w tym grafikę, inne zagnieżdżone obiekty, w tym listy wielopoziomowe.