Oferta po prawej

Zdanie używające końca

C W mi TODo

Aby utworzyć czerwoną linię, musisz znać tylko jeden parametr.

Jest to prosta właściwość wcięcia tekstu.

. 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.

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:

Przypisywany jest element z klasą outside-div właściwość text-align o wartości center, która spowoduje wyśrodkowanie tekstu 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. Tak więc w CSS dla selektora Internal-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 ten przykład nawiążemy współpracę z tłumaczem:

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:

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 sytuacjach awaryjnych. 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:

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:

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.

Można wyrównywać elementy w poziomie i w pionie różne sposoby. Wybór metody uzależniony jest od rodzaju elementu (blokowy lub śródliniowy), rodzaju jego pozycjonowania, rozmiaru itp.

1. Poziome wyrównanie do środka bloku/strony

1.1. Jeśli blok ma szerokość:

div ( width: 300px; margin: 0 auto; /*wyśrodkuj element poziomo w bloku nadrzędnym*/ )

Jeśli chcesz wyrównać element śródliniowy w ten sposób, musisz ustawić go tak, aby wyświetlał: block;

1.2. Jeśli blok jest zagnieżdżony w innym bloku i nie ma dla niego ustawionej szerokości/szerokości:

.wrapper(wyrównanie tekstu:środek;)

1.3. Jeśli blok ma szerokość i musi być zamocowany w środku bloku rodzica:

.wrapper (position: relative; /*ustaw pole nadrzędne na pozycję względną, abyśmy mogli później bezwzględnie umieścić pole wewnątrz niego*/) .box ( width: 400px; position: absolute; left: 50%; margin-left: - 200px; / *przesuń blok w lewo o odległość równą połowie jego szerokości*/ )

1.4. Jeśli nie ustawiono szerokości dla bloków, możesz wyśrodkować za pomocą nadrzędnego bloku otoki:

.wrapper (text-align: center; /*wyśrodkuj zawartość bloku*/) wcięcie między blokami*/ )

2. Wyrównanie w pionie

2.1. Jeśli tekst zajmuje jedną linię, na przykład dla przycisków i pozycji menu:

.button ( wysokość: 50px; wysokość linii: 50px; )

2.2. Aby wyrównać blok pionowo wewnątrz bloku nadrzędnego:

.wrapper (pozycja: względna;) .box (wysokość: 100px; pozycja: bezwzględna; góra: 50%; margines: -50px 0 0 0; )

2.3. Wyrównanie w pionie według typu tabeli:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Jeśli blok ma ustawioną szerokość i wysokość i musi być wyrównany do środka bloku rodzica:

.wrapper ( pozycja: względne; ) .box ( wysokość: 100px; szerokość: 100px; pozycja: bezwzględna; góra: 0; prawo: 0; dół: 0; lewy: 0; margines: auto; przepełnienie: auto; /*do treść nie rozprzestrzeniała się */ )

2.5. Pozycjonowanie bezwzględne na środku strony/bloku przy użyciu przekształcenia CSS3:

jeśli element ma wymiary

div ( width: 300px; /*ustaw szerokość pola*/ height:100px; /*ustaw wysokość pola*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ; )

jeśli element nie ma wymiarów i nie jest pusty

h1 ( margin: 0; transform: translate(-50%, -50%); pozycja: bezwzględna; góra: 50%; lewa: 50%; )

Wydawałoby się, że nie ma nic trudnego do ustawienia obrazu lub tekstu na środku okna przeglądarki. Używamy tagu CENTER i wszystko układa się na swoim miejscu. Jednak nie wszystko jest takie proste. Istnieją trzy sposoby wyśrodkowania wyrównania, z których każdy ma swoje własne cechy i różnice w różnych przeglądarkach.

Jeden z najprostszych i najwygodniejszych tagów CENTER służy do wyrównywania bloku tekstu. Ten znacznik może być również używany do centrowania figur i tabel. Wyjątkiem są żywioły lub dla których wyrównanie jest ustawiane przez właściwości znacznika IMG. Tak więc, jeśli umieścimy element wewnątrz znacznika CENTER obraz zostanie wyrównany do prawej.

Przykład 4.1. Centrowanie za pomocą znacznika CENTER

Ten tekst zostanie wyrównany do środka okna przeglądarki, a pod spodem
rysunek po prawej stronie.

Formalnie CENTER powinien być używany tylko jako parametr do innych tagów blokowych (P, PRE i inne). Jednak w przeglądarce Netscape Navigator 2.0 CENTER został wprowadzony jako samodzielny znacznik. Ten dodatek miał na celu usunięcie dodatkowego pionowego wypełnienia, które pojawia się podczas używania tagów blokowych. Jeśli zamiast znacznika CENTER tekst zostanie umieszczony wewnątrz akapitu (

) , pomiędzy nimi znajduje się dodatkowe pionowe wcięcie linia pozioma i ten tekst.

CENTER nie jest częścią specyfikacji HTML. W „oficjalnym” Formatowanie HTML, np. wyrównanie tekstu powinno odbywać się za pomocą atrybutów tagów (na przykład

) lub za pomocą stylów. Niemniej jednak ten tag zyskał prawo do istnienia. Jednak od czasu opublikowania specyfikacji HTML 4 W3, Konsorcjum zaleciło unikanie stosowania tagu CENTER, a element

, jak pokazano w przykładzie 4.2.

Przykład 4.2. Centrowanie za pomocą znacznika DIV

---

Innym sposobem na wyśrodkowanie jest użycie stylów. Style to instrukcje, które pozwalają kontrolować atrybuty formatowania, takie jak czcionka, kolor, wyrównanie itp. Przykład przedefiniowania znacznika P do wyśrodkowania tekstu.

Przykład 4.3. Centrowanie za pomocą stylów

Teraz, kiedy użyjesz tagu P z powyższym
stylu, tekst akapitu zostanie wyrównany do środka okna przeglądarki

Wyśrodkuj elementy pionowo za pomocą za pomocą CSS to zadanie, które stanowi pewną trudność 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 znajduje się w linii, użyj względnej właściwości wyrównania element nadrzędny. Gdy element jest elementem blokowym, ustawiamy jego szerokość i automatyczna instalacja lewy i prawy margines.

Większość ludzi, używając właściwości text-align:, odnosi się do właściwości vertical-align w celu wyśrodkowania 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:

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:

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:

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:

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:

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:

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 zmiennoprzecinkowego pustego 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.