Metody wyrównywania środka w pionie w CSS. Centrowanie elementu div i inne subtelności pozycjonowania
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:
Jakiś tekst
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ść nowoczesnych przeglądarek obsługuje CSS2.1, czyli 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 zagnieżdżonego w bloku):
div(
pozycja: względna;
}
zakres div(
wyświetlacz: blok;
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 (
wyświetlacz: blok;
szerokość: 100%;
}
nie są konieczne, ale mogą być potrzebne, jeśli 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)
Dzień dobry subskrybentom i czytelnikom tej publikacji. Dzisiaj chcę zagłębić się w szczegóły i powiedzieć, jak wyśrodkować tekst w CSS. W niektórych poprzednich artykułach pośrednio poruszałem ten temat, więc masz pewną wiedzę w tym obszarze.
Jednak w tej publikacji opowiem Ci o różnych sposobach wyrównywania obiektów, a także wyjaśnię, jak wcinać i podkreślać akapity. Zacznijmy więc uczyć się materiału!
HTML i jego potomstwo i wyrównaj
Ta metoda prawie nigdy nie jest używana, ponieważ została zastąpiona narzędziami kaskadowego arkusza stylów. Jednak wiedza o istnieniu takiego tagu nie zaszkodzi.
Jeśli chodzi o walidację (termin ten opisano szczegółowo w artykule „”), sama specyfikacja HTML potępia jego użycie < centrum>, ponieważ dla ważności konieczne jest użycie przejścia TYP DOK.>.
Ten typpozwala na przedostanie się zabronionych elementów.
Przejdźmy teraz do atrybutu wyrównywać. Ustawia poziome wyrównanie obiektów i dopasowuje się po deklaracji znacznika. Zwykle można go użyć do wyrównania treści do lewej ( lewy), wzdłuż prawej krawędzi ( Prawidłowy), wyśrodkowany ( centrum) i szerokość tekstu ( uzasadniać).
Poniżej podam przykład, w którym umieściłem obrazek i akapit na środku.
Ta treść będzie wyśrodkowana.
Należy pamiętać, że dla obrazu analizowany przez nas atrybut ma nieco inne znaczenie.
W przykładzie, którego użyłem wyrównaj="środek". Dzięki temu obraz został wyrównany tak, aby zdanie znajdowało się wyraźnie pośrodku obrazu.
Narzędzia do centrowania w CSS
Znacznie częściej wykorzystywane są właściwości CSS służące do wyrównywania bloków, treści tekstowych i graficznych. Wynika to przede wszystkim z wygody i elastyczności wdrażania stylów.
Zacznijmy więc od pierwszej właściwości centrowania tekstu - to jest tekst-wyrównywać.
Działa w taki sam sposób, jak wyrównanie w . Spośród słów kluczowych możesz wybrać jedno z ogólnej listy lub odziedziczyć cechy przodka ( dziedziczyć).
Chciałbym zauważyć, że w css3 możesz ustawić jeszcze 2 parametry: start– w zależności od zasad pisania tekstu (od prawej do lewej lub odwrotnie), ustawia wyrównanie do lewej lub prawej strony (podobnie jak w przypadku pracy w lewo lub w prawo) oraz koniec– przeciwieństwo startu (przy pisaniu tekstu od lewej do prawej działa jak prawy, przy pisaniu od prawej do lewej – lewy).
Zdanie po prawej stronie
Zdanie używające końca
Opowiem Ci o małej sztuczce. Podczas wybierania wartości uzasadniać ostatnia linijka może nieestetycznie zwisać od dołu. Aby np. ustawić go w centrum, można skorzystać z nieruchomości wyrównanie tekstu jako ostatnie.
Aby wyrównać zawartość witryny lub komórki tabeli w pionie, użyj właściwości wyrównanie w pionie. Poniżej opisałem główne słowa kluczowe danego elementu.
| Słowo kluczowe | Zamiar |
| linia bazowa | Określa wyrównanie do linii nadrzędnej, zwanej linią bazową. Jeśli obiekt-przodek nie ma takiej linii, wyrównanie następuje wzdłuż dolnej granicy. |
| środek | Środek zmutowanego obiektu jest wyrównywany do linii bazowej, do której dodawana jest wysokość podłogi elementu nadrzędnego. |
| spód | Dół zaznaczonej zawartości dopasowuje się do dołu obiektu znajdującego się pod nią. |
| szczyt | Podobny do dołu, tylko z górna część obiekt. |
| Super | Tworzy indeks górny znaku. |
| zastąpić | Tworzy indeks dolny elementu. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C W mi TODO
|
Wcięcia
I w końcu dochodzimy do wcięć akapitowych. Język CSS wykorzystuje specjalną właściwość zwaną wcięcie tekstu.
Za jego pomocą możesz wykonać zarówno czerwoną linię, jak i występ (należy podać wartość ujemną).
Aby utworzyć czerwoną linię wystarczy znać tylko jeden parametr.
Jest to prosta właściwość wcięcia tekstu.
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 przypadku wyrównania w pionie istnieje specjalna właściwość Vertical-align w CSS z wieloma wartościami. 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
- sięgnięcie,
- marża ujemna,
- przekształcać
- pseudoelement
- Flexbox.
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 typu 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 to jednostka wewnętrzna wyrównane poziomo, ale nie pionowo:
http://jsfiddle.net/c1bgfffq/
Dlaczego tak się stało? Rzecz w tym, że właściwość Vertical-align wpływa na wyrównanie sam element, a nie jego zawartość(z wyjątkiem sytuacji, gdy jest stosowany do komórek tabeli). Dlatego zastosowanie tej właściwości do elementu zewnętrznego niczego nie dało. Co więcej, zastosowanie tej właściwości do elementu wewnętrznego również nic nie da, ponieważ bloki inline są wyrównane pionowo względem sąsiednich bloków, a w naszym przypadku mamy jeden blok inline.
Istnieje kilka technik rozwiązania tego problemu. Poniżej przyjrzymy się bliżej każdemu z nich.
Wyrównanie za pomocą tabeli
Pierwsze rozwiązanie, które przychodzi na myśl, to zastąpienie zewnętrznego bloku tabelą zawierającą jedną komórkę. W takim przypadku wyrównanie zostanie zastosowane do zawartości komórki, czyli do wewnętrznego bloku.
http://jsfiddle.net/c1bgfffq/1/
Oczywistą wadą tego rozwiązania jest to, że z semantycznego punktu widzenia niewłaściwe jest używanie tabel do wyrównania. Drugą wadą jest to, że aby utworzyć stół, trzeba dodać do niego kolejny element jednostka zewnętrzna.
Pierwszy minus można częściowo usunąć zastępując tagi table i td tagami div i ustawiając tryb wyświetlania tabeli w CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Jednak zewnętrzny blok nadal pozostanie stołem ze wszystkimi wynikającymi z tego konsekwencjami.
Wyrównanie za pomocą wcięć
Jeżeli znane są wysokości bloku wewnętrznego i zewnętrznego, to ustawienie można ustalić za pomocą wcięć pionowych bloku wewnętrznego, korzystając ze wzoru: (H zewn. – H wewn.) / 2.Zewnętrzna ( wysokość: 200px; ) .wewnętrzna ( wysokość: 100px; margines: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Wadą rozwiązania jest to, że ma ono zastosowanie jedynie w ograniczonej liczbie przypadków, gdy znane są wysokości obu bloków.
Wyrównanie za pomocą wysokości linii
Jeśli wiesz, że blok wewnętrzny nie powinien zajmować więcej niż jedną linijkę tekstu, możesz skorzystać z właściwości line-height i ustawić ją na wysokość bloku zewnętrznego. Ponieważ zawartość wewnętrznego bloku nie powinna zawijać się do drugiej linii, zaleca się dodanie również białych znaków: 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/
Również tę technikę można również użyć do wyrównania tekstu wielowierszowego, jeśli zastąpisz wartość wysokości linii dla bloku wewnętrznego i dodasz także reguły display: inline-block i Vertical-align: Middle.
Zewnętrzna ( wysokość: 200 pikseli; wysokość linii: 200 pikseli; ) .inner ( wysokość linii: normalna; wyświetlacz: blok inline; wyrównanie do pionu: środek; )
http://jsfiddle.net/c1bgfffq/15/
Wadą tej metody jest konieczność znajomości wysokości bloku zewnętrznego.
Wyrównanie za pomocą „rozciągnięcia”
Tę metodę można zastosować, gdy nie jest znana wysokość bloku zewnętrznego, ale znana jest wysokość bloku wewnętrznego.Aby to zrobić, potrzebujesz:
- ustawić pozycjonowanie względne do bloku zewnętrznego i pozycjonowanie absolutne do bloku wewnętrznego;
- dodaj reguły top: 0 i Bottom: 0 do wewnętrznego bloku, w wyniku czego rozciągnie się on na całą wysokość zewnętrznego bloku;
- ustaw pionowe dopełnienie wewnętrznego bloku na auto.
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; ) .wewnętrzna ( pozycja: absolutna; góra: 50%; transformacja: translacjaY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Dlaczego w poprzedniej metodzie nie można było ustawić wartości procentowej? Ponieważ procentowe wartości marginesów są obliczane w stosunku do elementu nadrzędnego, wartość 50% będzie stanowić połowę wysokości pudełka zewnętrznego i musielibyśmy podnieść pudełko wewnętrzne do połowy jego własnej wysokości. Właściwość transform jest do tego idealna.
Wadą tej metody jest to, że nie można jej zastosować, jeśli jednostka wewnętrzna ma pozycjonowanie bezwzględne.
Wyrównanie za pomocą Flexbox
Bardzo nowoczesny sposób wyrównanie w pionie polega na użyciu elastycznego układu pudełka (popularnie znanego jako Flexbox). Moduł ten pozwala elastycznie kontrolować położenie elementów na stronie, rozmieszczając je niemal w dowolnym miejscu. Wyśrodkowanie dla Flexboxa jest bardzo prostym zadaniem.Blok zewnętrzny musi być ustawiony na wyświetlanie: flex, a blok wewnętrzny na margines: auto. I to wszystko! Piękne, prawda?
Zewnętrzny (wyświetlacz: flex; szerokość: 200px; wysokość: 200px; ) .inner ( szerokość: 100px; margines: auto; )
http://jsfiddle.net/c1bgfffq/14/
Wadą tej metody jest to, że Flexbox jest obsługiwany tylko przez nowoczesne przeglądarki.
Którą metodę wybrać?
Musisz zacząć od opisu problemu:- Aby wyrównać tekst w pionie, lepiej jest użyć wcięć pionowych lub właściwości line-height.
- W przypadku elementów pozycjonowanych bezwzględnie o znanej wysokości (np. ikon) idealna jest metoda z ujemną właściwością marginesu górnego.
- W bardziej złożonych przypadkach, gdy wysokość bloku nie jest znana, należy użyć pseudoelementu lub właściwości transform.
- Cóż, jeśli masz tyle szczęścia, że nie musisz obsługiwać starszych wersji przeglądarki IE, to oczywiście lepiej skorzystać z Flexboksa.
Tagi: Dodaj tagi
Projektanci stron internetowych na co dzień używają DIV w swojej pracy. Bez wątpienia jest to najpopularniejszy tag. Otwórz źródło dowolnej strony internetowej, a zobaczysz, że większość, jeśli nie dwie trzecie obiektów jest ujęta w nią
Co to jest DIV
Nazwa elementu pochodzi od Angielskie słowo podział, czyli podział. Podczas zapisywania znaczników służy do dzielenia elementów na bloki. Elementy DIV obejmują grupy treści na stronie internetowej. Na przykład obrazy, akapity z tekstem. Tag nie wpływa w żaden sposób na wyświetlanie treści i nie niesie żadnego obciążenia semantycznego.
DIV obsługuje wszystkie atrybuty globalne. Ale do projektowania stron internetowych potrzebujesz tylko dwóch - klasy i identyfikatora. O wszystkich innych będziesz pamiętać tylko w egzotycznych przypadkach, a to nie jest fakt. Atrybut wyrównania, który był wcześniej używany do wyśrodkowania lub wyrównania do lewej elementów div, stał się przestarzały.
Kiedy używać DIV
Wyobraź sobie, że witryna jest lodówką i DIV plastikowe pojemniki, według którego należy posortować zawartość. Nie włożyłbyś owoców do tego samego pojemnika z pasztetem. Każdy rodzaj produktu umieścisz osobno. Treści internetowe są generowane w podobny sposób.
Otwórz dowolną stronę internetową i podziel ją na znaczące bloki. Nagłówek u góry, stopka u dołu, tekst główny pośrodku. Z boku zazwyczaj znajduje się mniejsza kolumna z treścią reklamową lub chmurą tagów.
Teraz spójrz na każdą sekcję bardziej szczegółowo. Zacznij od nagłówka. Nagłówek strony posiada osobne logo, nawigację, nagłówek pierwszego poziomu, a czasem także hasło. Przypisz każdemu blokowi semantycznemu własny kontener. To nie tylko oddzieli elementy w przepływie, ale także ułatwi ich formatowanie. O wiele łatwiej będzie Ci wyśrodkować obiekt w znaczniku DIV, nadając mu klasę lub identyfikator.
Centrowanie DIV przy użyciu marginesów
Podczas renderowania elementów internetowych przeglądarka bierze pod uwagę trzy właściwości: dopełnienie, margines i obramowanie. Dopełnienie to przestrzeń pomiędzy treścią a jej obramowaniem. Margines - pola oddzielające jeden obiekt od drugiego. Granica to linie wzdłuż bloków. Można je przypisać do wszystkich na raz lub tylko do jednej strony:
div( obramowanie: 1px solid #333; obramowanie po lewej stronie: brak; )Właściwości te dodają przestrzeń pomiędzy obiektami oraz pomagają w ich prawidłowym wyrównaniu i umieszczeniu. Na przykład, jeśli blok z obrazem ma zostać przesunięty od lewej krawędzi do środka o 20%, przypisujesz do elementu wartość lewego marginesu wynoszącą 20%:
Blokuj-z-img(margines-lewy: 20%; )
Elementy można również formatować za pomocą wartości ich szerokości i ujemnego dopełnienia. Na przykład istnieje blok o wymiarach 200 na 200 pikseli. Najpierw przypiszemy mu pozycję absolutną i przesuniemy go do środka o 50%.
Div( pozycja: bezwzględna; lewa: 50%; )
Teraz, aby mieć pewność, że wyśrodkowany DIV będzie idealnie ustawiony, nadajemy mu ujemny margines z lewej strony równy 50% jego szerokości, czyli -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 o kilku poziomach zagnieżdżenia. Jeśli zostaną określone wartości dopełnienia i szerokości obramowania, przeglądarka domyślnie obliczy wymiary kontenera jako sumę grubości obramowań, dopełnienia po prawej i lewej stronie oraz samej zawartości w środku, co może również być niespodzianką.
Jeśli więc chcesz wyśrodkować DIV, użyj właściwości box-size z wartością border-box. Zapobiegnie to dodawaniu przez przeglądarkę wartości dopełnienia i obramowania do całkowitej szerokości elementu DIV. Aby podnieść lub obniżyć element, użyj także wartości ujemnych. Jednak w tym przypadku można je przypisać albo do górnego, albo dolnego pola kontenera.
Jak wyśrodkować blok DIV przy użyciu automatycznych marginesów
Jest to łatwy sposób na wyśrodkowanie dużych bloków. Po prostu przypisujesz szerokość kontenera i właściwość marginesu do auto. Przeglądarka umieści blok na środku z równymi marginesami po lewej i prawej stronie, wykonując całą pracę samodzielnie. Dzięki temu nie ryzykujesz pomyłki w obliczeniach matematycznych i znacząco oszczędzasz swój czas.
Podczas tworzenia responsywnych aplikacji korzystaj z metody automatycznego pola. Najważniejsze jest przypisanie wartości szerokości do kontenera w em lub procentach. Powyższy przykładowy kod wyśrodkuje DIV na dowolnym urządzeniu, w tym telefony komórkowe, zajmie 90% ekranu.
Wyrównanie poprzez właściwość wyświetlania: inline-block
Domyślnie elementy DIV są uważane za elementy blokowe, a ich wartością wyświetlaną jest blok. W przypadku tej metody konieczne będzie zastąpienie tej właściwości. Odpowiednie tylko dla DIV z kontenerem nadrzędnym:
Elementowi z klasą external-div przypisana jest właściwość text-align o 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, element internal-div musi być traktowany jako małe litery. Zatem w tabeli CSS selektora wewnętrznego div wpisujesz następujący kod:
Wewnętrzny-div(wyświetlanie: blok inline; )
Zmieniasz właściwość wyświetlania z block na inline-block.
metoda transformacji/tłumaczenia
Kaskadowe arkusze stylów umożliwiają dowolne przesuwanie, pochylanie, obracanie i przekształcanie elementów internetowych w inny sposób. Służy do tego właściwość transform. Wartości wskazują pożądany typ i stopień transformacji. W w tym przykładzie będziemy współpracować z tłumaczem:
transformacja: tłumaczenie (50%, 50%);Funkcja tłumaczenia przesuwa element z jego bieżącej pozycji w lewo/prawo i w górę/w dół. W nawiasach podaje się dwie wartości:
- stopień ruchu poziomego;
- stopień ruchu pionowego.
Jeśli element ma zostać przesunięty tylko wzdłuż jednej z osi współrzędnych, to po słowie „przetłumacz” podajemy nazwę osi, a w nawiasie wielkość wymaganego przemieszczenia:
Przekształć: przetłumacz Y(-20%);
W niektórych podręcznikach można znaleźć transformację z przedrostkami dostawców:
Transformacja Webkit: tłumaczenie (50%, 50%); -ms-transform: tłumaczenie (50%, 50%); transformacja: tłumaczenie (50%, 50%);
W 2018 roku nie jest to już konieczne; właściwość jest obsługiwana przez wszystkie przeglądarki, w tym Edge i IE.
Aby wyśrodkować żądany DIV, funkcja tłumaczenia CSS zapisuje wartość 50% dla osi pionowej i poziomej. Spowoduje to, że przeglądarka przesunie element od jego bieżącej pozycji o połowę jego szerokości i wysokości. Należy określić właściwości szerokości i wysokości:
Należy pamiętać, ż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 przesuwając DIV, może nałożyć się na inny kontener. Dlatego ten sposób centrowania elementów środnika jest uważany za niestandardowy i stosowany tylko w przypadkach skrajnej konieczności. Do animacji wykorzystywane są przekształcenia zgodne ze wszystkimi kanonami CSS.
Praca z układem Flexbox
Brany jest pod uwagę Flexbox w skomplikowany sposób układy internetowe. Ale jeśli opanujesz to, zrozumiesz, że jest to o wiele prostsze i przyjemniejsze niż standardowe sposoby formatowanie. Specyfikacja Flexbox jest elastyczna i niesamowita potężny sposób obróbka elementów. Z Język angielski Nazwę modułu tłumaczy się jako „elastyczny kontener”. Wartości szerokości, wysokości i rozmieszczenia elementów dopasowują się automatycznie, bez obliczania wcięć i marginesów.
W poprzednich przykładach pracowaliśmy już z właściwością display, ale ustawiliśmy ją na wartości block i inline-block. Do tworzenia układów elastycznych użyjemy display: flex. Najpierw potrzebujemy elastycznego kontenera:
Aby przekonwertować go na kontener elastyczny w tabelach kaskadowych, piszemy:
Pojemnik elastyczny (wyświetlacz: flex; )
Wszystkie zagnieżdżone obiekty, ale tylko bezpośrednie obiekty potomne, będą elementami elastycznymi:
Jeśli umieścisz listę w elastycznym kontenerze, elementy listy li nie będą 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ślone wartości, te dwie właściwości automatycznie umieszczają obiekty zgodnie z potrzebami. Jeśli musimy wyśrodkować wszystkie zagnieżdżone DIV-y, napiszemy justify-content: center, wyrównanie-items: center i nic więcej. Przeglądarka wykona resztę pracy sama:
Aby wyśrodkować tekst na elementach DIV będących elementami elastycznymi, można zastosować standardową technikę wyrównywania tekstu. Możesz też uczynić każdy zagnieżdżony DIV także elastycznym kontenerem i zarządzać zawartością za pomocą justify-content. Metoda ta jest o wiele bardziej racjonalna, jeśli zawiera różnorodną treść, w tym grafikę, inne zagnieżdżone obiekty, w tym listy wielopoziomowe.
Cześć! Kontynuujemy doskonalenie podstaw języka HTML. Zobaczmy, co musisz napisać, aby wyrównać tekst do środka, szerokości lub krawędzi.
Przejdźmy do rzeczy, spójrzmy, jak wyśrodkować tekst na trzech na różne sposoby. Dwa ostatnie są powiązane bezpośrednio z arkuszem stylów. Może to być plik CSS, który łączy się ze stronami serwisu i określa ich wygląd.
Metoda 1 – bezpośrednia praca z HTML
To całkiem proste. Zobacz przykład poniżej.
Wyrównaj akapit do środka.
Jeśli chcesz przenieść fragmenty tekstu w inny sposób, zamiast parametru „środek” wpisz następujące wartości:
- justify – wyrównuje tekst do szerokości strony;
- prawo – na prawej krawędzi;
- w lewo - w lewo.
Analogicznie możesz przenieść treść znajdującą się w nagłówkach (h1, h2) i kontenerze (div).
Metoda 2 i 3 - użycie stylów
Przedstawiony powyżej projekt można nieco zmodyfikować. Efekt będzie taki sam. Aby to zrobić musisz napisać poniższy kod.
Blok tekstowy.
W tej formie kod jest zapisywany bezpośrednio w kodzie HTML w celu wyśrodkowania treści tekstowej.
Istnieje inny alternatywny sposób osiągnięcia wyników. Będziesz musiał wykonać kilka kroków.
Krok 1. W głównym kodzie napisz
Materiał tekstowy.
Krok 2. W załączonym pliku CSS wpisz następujący kod:
Równo (text-align:center;)
Zauważam, że słowo „rovno” to tylko nazwa klasy, którą można nazwać inaczej. Pozostaje to w gestii programisty.
Analogicznie, w HTML można łatwo wyśrodkować, wyjustować i wyrównać tekst do prawej lub lewej krawędzi strony. Jak widać, istnieje znacznie więcej niż jedna możliwość osiągnięcia celu.
Tylko kilka pytań:
- Czy realizujesz projekt informacyjny non-profit?
- Chcesz, aby Twoja strona internetowa dobrze pozycjonowała się w wyszukiwarkach?
- Chcesz zarabiać w internecie?
Jeśli wszystkie odpowiedzi są pozytywne, spójrz tylko na zintegrowane podejście do tworzenia stron internetowych. Informacje te będą szczególnie przydatne, jeśli będą działać na systemie CMS WordPress.
Pragnę zaznaczyć, że własne strony internetowe to tylko jedna z wielu możliwości generowania pasywnego lub aktywnego dochodu w Internecie. Mój blog jest poświęcony możliwościom finansowym w Internecie.
Czy kiedykolwiek pracowałeś w obszarze arbitrażu ruchu, copywritingu i innych obszarach działalności, które przynoszą główne lub dodatkowy dochód podczas współpracy zdalnej? O tym i wiele więcej możesz dowiedzieć się już teraz na łamach mojego bloga.
W przyszłości opublikuję ich jeszcze kilka przydatne informacje. Pozostań w kontakcie. Jeśli chcesz, możesz subskrybować aktualizacje Workip przez e-mail. Formularz subskrypcji znajduje się poniżej.