Poziome i pionowe wyrównanie elementów w CSS. Wyrównaj blok do środka strony

Dzisiaj, drogi czytelniku, zajmiemy się problemem wyrównania pionowego w bloku div.

Najprawdopodobniej już wiesz o istnieniu wspaniałej właściwości CSS Vertical-align.

I sam Bóg nakazał nam używać właśnie tej właściwości do wyrównania w pionie (nie bez powodu ma ona tak oczywistą nazwę).

Opis problemu: Konieczne jest wyrównanie zawartości bloku o zmiennej wysokości do środka względem pionu.

Teraz zacznijmy rozwiązywać problem.

I tak mamy blok, jego wysokość może się zmieniać:

Zablokuj zawartość

I tak mamy blok, jego wysokość może się zmieniać:

Pierwszą rzeczą, która przychodzi na myśl, jest wykonanie następującego zwodu: I tak mamy blok, jego wysokość może się zmieniać: Istnieją podstawy, aby sądzić, że to zdanie

zostanie wyrównany do środkowej wysokości kontenera div. Ale tak nie było! W ten sposób nie osiągniemy oczekiwanego wyrównania do środka. Dlaczego? Wydawać by się mogło, że wszystko jest wskazane poprawnie. Okazuje się, że to jest sedno: nieruchomość wyrównanie w pionie

można używać wyłącznie do wyrównywania zawartości komórek tabeli lub do wyrównywania elementów śródliniowych względem siebie.

Jeśli chodzi o wyrównanie wewnątrz komórki tabeli, myślę, że wszystko jest jasne. Ale wyjaśnię inny przypadek z elementami wbudowanymi.

Wyrównanie w pionie elementów śródliniowych Załóżmy, że masz linię tekstu podzieloną znacznikami linii

na części:

Kawałek tekstu wita!

Znacznik wbudowany to kontener, którego wygląd nie powoduje zawinięcia treści do nowej linii.

Działanie znacznika blokowego powoduje zawinięcie zawartości kontenera do nowej linii. , jest znacznikiem blokowym. Jeśli załączymy fragmenty tekstu w blokach wtedy każdy z nich będzie w nowej linii. Używanie tagu , który w odróżnieniu od , jest małą literą, kontenery nie zostaną przeniesione do nowej linii, wszystkie kontenery

pozostanie na tej samej linii. Pojemnik

wygodny w użyciu przy określaniu fragmentu tekstu specjalnym formatowaniem (zaznaczanie go kolorem, inną czcionką itp.) Do kontenerów

Zastosuj następujące właściwości CSS:

#perviy( wyrównanie w pionie:sub; ) #vtoroy( wyrównanie w pionie:3px; ) #tretiy( wyrównanie w pionie:-3px;)

Wynikowy wiersz tekstu będzie wyglądał następująco:

Trochę się rozproszyliśmy, teraz wracamy do naszego głównego zadania.

Wyrównanie w pionie w kontenerze div

Bez względu na wszystko, do wyrównania w kontenerze div użyjemy właściwości Vertical-align. Jak już mówiłem, właściwość tę można wykorzystać w przypadku wyrównywania elementów inline (przypadek ten szczegółowo omawialiśmy powyżej i nie nadaje się on dla nas do wyrównywania w kontenerze div); pozostaje tylko wykorzystać fakt, że Ale tak nie było! W ten sposób nie osiągniemy oczekiwanego wyrównania do środka. Dlaczego? Wydawać by się mogło, że wszystko jest wskazane poprawnie. Okazuje się, że to jest sedno: nieruchomość działa dla komórek tabeli.

Jak możemy to wykorzystać? Nie mamy tabeli, pracujemy z kontenerem div.

Ha, okazuje się, że jest to bardzo proste.

Właściwość wyświetlania CSS pozwala nam zamienić nasz blok div w komórkę tabeli, można to zrobić łatwo i naturalnie:

Powiedzmy, że mamy div klasy wyrównanie tekstu:

I tak mamy blok, jego wysokość może się zmieniać:

Dla tego bloku określamy następującą właściwość CSS:

Textalign(wyświetlanie: komórka tabeli; )

Ta instrukcja CSS w cudowny sposób zamieni nasz element div w komórkę tabeli, nie zmieniając go w żaden sposób wizualnie. W przypadku komórki tabeli możemy zastosować tę właściwość Ale tak nie było! W ten sposób nie osiągniemy oczekiwanego wyrównania do środka. Dlaczego? Wydawać by się mogło, że wszystko jest wskazane poprawnie. Okazuje się, że to jest sedno: nieruchomość całkowicie, a żądane wyrównanie w pionie będzie działać.

Jednak wszystko nie może zakończyć się tak prosto. Mamy wspaniałą przeglądarkę IE. Nie wie, jak pracować z nieruchomością wyświetlacz: komórka-tabela(Sugeruję przeczytanie tabeli ilustrującej funkcjonalność tej właściwości CSS w różnych przeglądarkach na stronie htmlbook.ru). Dlatego będziemy musieli uciekać się do różnych sztuczek.

Istnieje wiele sposobów osiągnięcia wyrównania w kontenerze div dla wszystkich przeglądarek:

• Metoda wykorzystująca dodatkowy pomocniczy kontener div
• Metoda wykorzystująca wyrażenie. Wiąże się to ze skomplikowanym obliczeniem wysokości bloków. Nie da się tego zrobić bez znajomości JavaScript.
• Korzystanie z właściwości line-height. Ta metoda nadaje się tylko do pionowego wyrównania bloku o znanej wysokości i dlatego nie ma zastosowania w ogólnym przypadku.
• Stosowanie bezwzględnego i względnego przesunięcia treści w przypadku przeglądarki IE. Ta metoda wydaje mi się najbardziej zrozumiała i prosta. Dodatkowo można go zaimplementować dla kontenera div o zmiennej wysokości. Zastanowimy się nad tym bardziej szczegółowo.

Jak rozumiesz, musimy po prostu rozwiązać problem wyrównania pionowego w IE, związany z niezrozumieniem jego właściwości wyświetlacz: komórka-tabela(ani IE6, ani IE7, ani IE8 nie znają tej właściwości). Dlatego za pomocą komentarza warunkowego specjalnie dla przeglądarek z rodziny IE wskażemy inne właściwości CSS.

Warunkowy komentarz

Typ konstrukcji:

... Instrukcje, które mają zastosowanie tylko wtedy, gdy warunek w nawiasach kwadratowych jest prawdziwy...

nazywa się komentarzem warunkowym (uważaj, typ komentarza warunkowego musi całkowicie odpowiadać podanemu przykładowi, aż do spacji).

Instrukcje zawarte w takim komentarzu warunkowym zostaną wykonane tylko wtedy, gdy przeglądarka interpretująca ten kod należy do rodziny IE.

Zatem za pomocą komentarza warunkowego możemy ukryć fragment kodu przed wszystkimi przeglądarkami z wyjątkiem IE.

Rozwiązanie problemu

Z powodu całej tej pietruszki będziemy musieli zaopatrzyć nasz kod HTML w dwa dodatkowe kontenery. Tak będzie wyglądał nasz blok tekstowy:

To jest swego rodzaju tekst weryfikacyjny.
Składa się z dwóch linii.

Dla kontenera div klasy wyrównanie tekstu Ustawiono właściwości CSS, które wyrównują jego zawartość w pionie dla wszystkich normalnych przeglądarek (oczywiście z wyjątkiem IE):

Wyświetlacz: komórka tabelaryczna; wyrównanie w pionie: środek;

I jeszcze dwie właściwości, które ustawiają szerokość i wysokość bloku:

Szerokość: 500 pikseli; wysokość: 500px;

To wystarczy, aby wyrównać zawartość kontenera w pionie, we wszystkich przeglądarkach z wyjątkiem IE.

Teraz zaczynamy dodawać właściwości związane z wyrównaniem dla przeglądarek z rodziny IE (to dla nich zastosowaliśmy dodatkowe bloki div I przęsło):

Nawiązując do tagu div wewnątrz bloku klasowego wyrównanie tekstu. W tym celu należy najpierw wskazać nazwę klasy, a następnie oddzieloną spacją tag, do którego mamy dostęp.

Textalign div(pozycja: absolutna; góra: 50%; )

Ten projekt oznacza: dla wszystkich znaczników div wewnątrz bloku z klasą wyrównanie tekstu zastosować wymienione właściwości.

Odpowiednio style określone dla bloku wyrównanie tekstu są modyfikowane:

Textalign (wyświetlanie: komórka tabeli; wyrównanie w pionie: środek; szerokość: 500 pikseli; wysokość: 500 pikseli; pozycja: względna; )

Teraz lewy górny punkt bloku tekstowego został przesunięty w dół o 50%.

Aby wyjaśnić, co się dzieje, narysowałem ilustrację:

Jak widać na zdjęciu, poczyniliśmy pewne postępy. Ale to nie wszystko! Lewy górny punkt żółtego bloku rzeczywiście przesunął się o 50% w dół w stosunku do bloku macierzystego (fioletowego). Potrzebujemy jednak, aby pięćdziesiąt procent wysokości fioletowego bloku stanowiło środek żółtego bloku, a nie jego lewy górny punkt.

Teraz tag zacznie działać przęsło i jego względne położenie:

Rozpiętość tekstu (pozycja: względna; góra: -50%; )

W ten sposób przesunęliśmy żółty klocek w górę o 50% jego wysokości w stosunku do jego początkowej pozycji. Jak rozumiesz, wysokość żółtego bloku jest równa wysokości wyśrodkowanej zawartości. Ostatnia operacja na kontenerze span umieściła naszą zawartość pośrodku fioletowego bloku. Brawo!

Oszukajmy trochę

Przede wszystkim musimy ukryć pietruszkę przed wszystkimi normalnymi przeglądarkami i otworzyć ją dla IE. Można to oczywiście zrobić za pomocą komentarza warunkowego; nie bez powodu się z tym zapoznaliśmy:

.textalign div( pozycja: bezwzględna; góra: 50%; ) .textalign span( pozycja: względna; góra: -50%; )

Jest mały problem.

Jeśli wyśrodkowana zawartość jest zbyt wysoka, prowadzi to do nieprzyjemnych konsekwencji: przewijanie w pionie powoduje dodatkową wysokość. Rozwiązanie problemu: musisz dodać właściwość przepełnienie: ukryte blok

wyrównanie tekstu. Zapoznaj się szczegółowo z nieruchomością przelewowy

możliwe w. wyrównanie tekstu Ostateczne instrukcje CSS dla bloku

ma postać:

Textalign (wyświetlanie: komórka tabeli; wyrównanie w pionie: środek; szerokość: 500 pikseli; wysokość: 500 pikseli; pozycja: względna; przepełnienie: ukryte; obramowanie: 1 pikseli jednolity czarny; ) wyrównanie tekstu Przepraszam, zapomniałem wspomnieć o jednej ważnej kwestii. Jeśli spróbujesz ustawić wysokość bloku klasy

w procentach, wtedy nic ci nie wyjdzie.

Centrowanie w bloku o zmiennej wysokości wyrównanie tekstu Bardzo często zachodzi potrzeba ustawienia wysokości bloku klasy

nie w pikselach, ale jako procent wysokości bloku nadrzędnego i wyrównaj zawartość kontenera div na środku. wyrównanie tekstu Problem polega na tym, że nie da się tego zrobić w przypadku komórki tabeli (ale blok klasy dzięki tej właściwości zamienia się dokładnie w komórkę tabeli).

wyświetlacz:komórka tabeli W takim przypadku musisz użyć bloku zewnętrznego, dla którego określono właściwość CSS wyświetlacz:stół dzięki tej właściwości zamienia się dokładnie w komórkę tabeli i już ustawiłem dla niego procentową wartość wysokości. Następnie zagnieżdżony w nim blok z dyrektywą CSS

, z radością odziedziczy wysokość bloku nadrzędnego.

Aby zaimplementować w naszym przykładzie blok o zmiennej wysokości, dokonamy niewielkiej edycji CSS: wyrównanie tekstu Do klasy zmienimy wartość nieruchomości wyświetlacz Z komórka-stół NA tabela i usuń dyrektywę wyrównania wyrównanie pionowe: środek

. Teraz możemy już bezpiecznie zmienić wartość wysokości z 500 pikseli na np. 100%. wyrównanie tekstu Zatem właściwości CSS bloku klasy

będzie wyglądać tak:

Textalign(wyświetlanie: tabela; szerokość: 500 pikseli; wysokość: 100%; pozycja: względna; przepełnienie: ukryte; obramowanie: 1 piksel w kolorze czarnym; ) wyrównanie tekstu(to ten sam żółty blok na obrazku), musisz ustawić właściwość CSS dzięki tej właściwości zamienia się dokładnie w komórkę tabeli, wówczas odziedziczy wysokość 100% z bloku nadrzędnego wyrównanie tekstu(fioletowy blok). I nic nie stanie nam na przeszkodzie, aby wyrównać zawartość zagnieżdżonego w środku kontenera div z właściwością i usuń dyrektywę wyrównania.

Otrzymujemy kolejną dodatkową listę właściwości CSS dla bloku div zagnieżdżonego w kontenerze wyrównanie tekstu.

Textalign div (wyświetlanie: komórka tabeli; wyrównanie w pionie: środek; )

Na tym polega cała sztuczka. W razie potrzeby możesz mieć zmienną wysokość z wyśrodkowaną treścią.

Aby uzyskać więcej informacji na temat pionowego wyrównania bloku o zmiennej wysokości, zobacz .

Każdy projektant układu stale staje przed koniecznością wyrównania treści w bloku: w poziomie lub w pionie. Istnieje 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 głównych punktów. Postanowiłem przedstawić te informacje w dogodnej dla mnie formie, aby nie szukać już w Google.

Wyrównywanie bloków o znanych rozmiarach

Najłatwiejszym sposobem użycia CSS jest wyrównywanie bloków o znanej wysokości (w przypadku wyrównania w pionie) lub szerokości (w przypadku wyrównania w poziomie).

Wyrównanie za pomocą dopełnienia

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

Na przykład istnieje obraz o wymiarach 200 na 200 pikseli i musisz go wyśrodkować w bloku o wymiarach 240 na 300. Możemy ustawić wysokość i szerokość zewnętrznego bloku = 200 pikseli i dodać 20 pikseli na górze i na dole i 50 po lewej i prawej stronie.

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

Jeśli blok jest ustawiony na „położenie: bezwzględne”, wówczas można go ustawić względem najbliższego elementu nadrzędnego za pomocą „pozycji: względnej”. Aby to zrobić, musisz przypisać tę samą wartość wszystkim właściwościom („top”, „right”, „bottom”, „left”) bloku wewnętrznego, a także „margines: auto”.

*Istnieje niuans: szerokość (wysokość) bloku wewnętrznego + wartość lewego (prawego, dolnego, górnego) nie powinna przekraczać wymiarów bloku nadrzędnego. Bezpieczniej jest przypisać 0 (zero) do właściwości po lewej stronie (prawa, dolna, górna).

.example-wrapper2 (pozycja: względna; wysokość: 250px; tło: url(space.jpg) ; ) .cat-king ( szerokość: 200px; wysokość: 200px; pozycja: bezwzględna; góra: 0; lewa: 0; dół: 0 ; prawo : 0 ; margines : auto ; tło : url(king.png) ; ) Wyrównanie w poziomie Wyrównanie za pomocą „text-align: center”

Aby wyrównać tekst w bloku, dostępna jest specjalna właściwość „text-align”. Po ustawieniu na „środek” każda linia tekstu zostanie wyrównana poziomo. W przypadku tekstu wielowierszowego rozwiązanie to jest stosowane niezwykle rzadko; częściej można tę opcję znaleźć w celu wyrównywania rozpiętości, linków lub obrazów.

Kiedyś musiałem wymyślić jakiś tekst, aby pokazać, jak działa wyrównanie tekstu za pomocą CSS, ale nic ciekawego nie przyszło mi do głowy. Na początku postanowiłem skopiować gdzieś rymowankę dla dzieci, ale przypomniałem sobie, że mogłoby to zepsuć wyjątkowość artykułu, a nasi drodzy czytelnicy nie będą mogli go znaleźć w Google. A potem zdecydowałem się napisać ten akapit - w końcu nie o to chodzi, ale chodzi o zgodność.

.example-text (wyrównanie tekstu: środek; dopełnienie: 10 pikseli; tło: #FF90B8 ; )

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

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

.example-wrapper3 (wyrównanie tekstu: do środka; tło: #FF90B8; ) .inline-text (wyświetlanie: blok inline; szerokość: 40%; dopełnienie: 10 pikseli; wyrównanie tekstu: do lewej; tło: #FFE5E5 ; ) Wyrównanie blokuje przy użyciu marginesu

Elementy blokowe o znanej szerokości można łatwo wyrównać w poziomie, ustawiając dla nich opcję „margines lewy: auto; margines prawy: auto”. Zwykle używany jest zapis skrócony: „margines: 0 auto” (zamiast zera można użyć dowolnej wartości). Ale ta metoda nie nadaje się do wyrównania w pionie.

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

Tak należy ustawić wszystkie bloki, jeśli to możliwe (gdzie nie jest wymagane pozycjonowanie stałe lub absolutne) - jest to najbardziej logiczne i odpowiednie. Chociaż wydaje się to oczywiste, czasami widziałem przerażające przykłady z negatywnymi wcięciami, więc postanowiłem to wyjaśnić.

Wyrównanie pionowe

Wyrównanie w pionie jest znacznie bardziej problematyczne - najwyraźniej nie zostało to przewidziane w CSS. Istnieje kilka sposobów osiągnięcia pożądanego rezultatu, ale nie wszystkie są zbyt piękne.

Wyrównanie z właściwością line-height

W przypadku, gdy w bloku znajduje się tylko jedna linia, można uzyskać jej wyrównanie w pionie, stosując właściwość „line-height” i ustawiając ją na żądaną wysokość. Dla bezpieczeństwa powinieneś także ustawić „wysokość”, której wartość będzie równa wartości „wysokości linii”, ponieważ ta ostatnia nie jest obsługiwana we wszystkich przeglądarkach.

.example-wrapper4 (wysokość linii: 100 pikseli; kolor: #DC09C0; tło: #E5DAE1; wysokość: 100 pikseli; wyrównanie tekstu: do środka;)

Możliwe jest również osiągnięcie wyrównania blokowego za pomocą kilku linii. Aby to zrobić, będziesz musiał użyć dodatkowego bloku opakowania i ustawić dla niego wysokość linii. Blok wewnętrzny może być wielowierszowy, ale musi być „wbudowany”. Musisz zastosować do niego „wyrównanie w pionie: środek”.

.example-wrapper5 ( wysokość linii : 160px ; wysokość : 160px ; rozmiar czcionki : 0 ; tło : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; rozmiar czcionki : 14px ; wysokość linii : 1.5 ; wyrównanie w pionie: środkowe tło: #FFFAF2;

Blok opakowania musi mieć ustawiony „font-size: 0”. Jeśli rozmiar czcionki nie zostanie ustawiony 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 od rodzica.

Wyrównanie pionowe w tabelach

Właściwość „vertical-align” wpływa również na komórki tabeli. Gdy wartość jest ustawiona na „środek”, zawartość komórki jest wyrównywana do środka. Oczywiście układ tabeli jest obecnie uważany za archaiczny, ale w wyjątkowych przypadkach można go symulować, podając „display: table-cell”.

Zwykle używam tej opcji do wyrównania w pionie. Poniżej znajduje się przykładowy układ zaczerpnięty z ukończonego projektu. Interesujący jest obraz wyśrodkowany w ten sposób w pionie.

.one_product .img_wrapper ( display : komórka-tabeli ; wysokość : 169 pikseli ; wyrównanie w pionie : środek ; przepełnienie : ukryte ; tło : #fff ; szerokość : 255 pikseli ; ) .one_product img ( maksymalna wysokość : 169 pikseli ; maksymalna szerokość : 100 %; minimalna szerokość: 140px; wyświetlacz: blok;

Należy pamiętać, że jeśli element ma ustawiony parametr „float” inny niż „none”, to i tak będzie to blok (wyświetlanie: blok) - wtedy trzeba będzie zastosować dodatkowe opakowanie blokowe.

Wyrównanie z dodatkowym elementem wbudowanym

W przypadku elementów wbudowanych możesz użyć „wyrównania w pionie: środek”. Spowoduje to wyrównanie wszystkich elementów z „display: inline”, które znajdują się na tej samej linii względem wspólnej linii środkowej.

Musisz utworzyć blok pomocniczy o wysokości równej wysokości bloku nadrzędnego, a następnie żądany blok zostanie wyśrodkowany. Aby to zrobić, wygodnie jest użyć pseudoelementów:przed lub:po.

.example-wrapper6 (wysokość: 300 pikseli; wyrównanie tekstu: środek; tło: #70DAF1; ) .pudge (wyświetlanie: blok wbudowany; wyrównanie w pionie: środek; tło: url(pudge.png) ; kolor tła: # fff; szerokość: 200 pikseli; wysokość: 200 pikseli;

Jeśli nie zależy Ci zbytnio na użytkownikach Explorera 8 lub tak bardzo, że chcesz wstawić dla nich kawałek dodatkowego JavaScript, możesz użyć „display: flex”. Pola Flex świetnie radzą sobie z problemami z wyrównaniem i wystarczy wpisać „margines: auto”, aby wyśrodkować zawartość.

Jak dotąd praktycznie nigdy nie spotkałem się z tą metodą, ale nie ma dla niej specjalnych ograniczeń.

.example-wrapper7 (wyświetlacz: flex; wysokość: 300px; tło: #AEB96A; ) .example-wrapper7 img (margines: auto;)

Cóż, to wszystko, co chciałem napisać na temat wyrównania CSS. Teraz wycentrowanie treści nie będzie już problemem!

Wyrównywanie elementów na stronie internetowej może być trudnym zadaniem, szczególnie jeśli chodzi o wyrównywanie tekstu w pionie. To pytanie często pojawia się na forach, a rozwiązanie tego problemu jest szczególnie trudne dla początkujących użytkowników. Ale w rzeczywistości nie ma tu nic skomplikowanego. Wszystko, czego potrzebujesz, to odrobina wiedzy na temat kaskadowych arkuszy stylów CSS. Ponieważ wszystko to odbywa się zgodnie z jego zasadami.

Wyrównanie tekstu w pionie można osiągnąć na co najmniej pięć różnych sposobów. Każdy z nich jest dobry na swój sposób, biorąc pod uwagę okoliczności i szczegóły sytuacji. Przyjrzymy się kilku przykładom i na podstawie warunków wybierzesz dla siebie odpowiednią rotację.

Pierwsza metoda z wysokością linii

Pierwsza metoda jest bardzo banalna i ma dużą wadę, która ogranicza jej zastosowanie. Ale mimo to, cokolwiek by powiedzieć, może być przydatne, a nawet przynieść pożądany rezultat. Będzie to wyrównanie warunkowe, ponieważ zasadniczo ustawiamy wysokość linii tak, aby odpowiadała wysokości bloku za pomocą właściwości line-height.

pierwszy przykład. demonstracja nr 1

pierwszy przykład. demonstracja nr 1

/* No.1 */ .talign1( obramowanie: 1px jednolity czerwony; wysokość:200px;/* wysokość bloku */ ) .talign1 > p(line-height:200px;/* ustaw wysokość linii zgodnie z wysokością bloku * / margines :0;/* usuń zewnętrzne wypełnienie, jeśli istnieje */ text-align:center;/* wyrównaj tekst poziomo do środka */ dopełnienie: 0;/* usuń wewnętrzne wypełnienie, jeśli istnieje */ ) /* end Nr 1*/

Dokładnie w ten sam sposób można zaimplementować obraz w środku w pionie, ale dodając jedną nową właściwość Vertical-align: Middle; .

Przykład. Demo nr 2

Przykład. Demo nr 2

/* No.2 */ .talign2( obramowanie: 1px jednolity czerwony; wysokość linii:200px;/* wysokość linii bloku */ ) .talign2 div(text-align:center;/* wyrównaj elementy poziomo do środka */ ) .talign2 img(vertical-align:middle;/* wyrównaj obrazy w pionie do środka */ obramowanie: 1px jednolity czarny; ) /* koniec №2*/

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

Ta metoda jest szeroko stosowana w wielu zadaniach CSS, w tym w naszym zadaniu. Należy jednak zaznaczyć, że nie jest on całkowicie doskonały i ma swoje skutki uboczne. Dzieje się tak, ponieważ procentowe wyśrodkowanie elementu będzie wyśrodkowane na lewej górnej krawędzi wewnętrznego bloku.

Dlatego należy ustawić ujemną wartość marginesów. Wielkość wcięcia u góry powinna odpowiadać połowie wysokości bloku wewnętrznego, a wcięcia po lewej stronie powinna odpowiadać połowie szerokości. W ten sposób otrzymujemy absolutny środek.

W tej opcji prawdopodobnie obowiązkowa jest znajomość dokładnej wysokości i szerokości elementu podrzędnego. W przeciwnym razie może nastąpić nieprawidłowe centrowanie.

/* No.3 */ .talign3( obramowanie: 1px jednolity czerwony; wysokość: 200px;/* wysokość bloku */ pozycja: względna; ) .talign3 div( pozycja: bezwzględna; góra: 50%; lewa: 50%; wysokość : 30%; szerokość: 50%; margines: -5% 0 0 -25%; obramowanie: 1 piksel w kolorze czarnym;

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

Tutaj używamy starej techniki, zamieniając elementy w tabelę z komórkami. W tym przypadku tagi tabeli

nie będzie miało zastosowania, ale będzie używać właściwości CSS, takich jak display: table; , wyświetlacz: komórka-tabela; . W starszych wersjach IE ta metoda nie działa i nie jest konieczna. Czy ktoś jeszcze ich faktycznie używa?

Przykład. demonstracja nr 4

Przykład. demonstracja nr 4

/* Nr 4 */ .talign4( obramowanie: 1px jednolity czerwony; wysokość: 200px;/* wysokość bloku */ display: table; szerokość: 100%; ) .talign4 div( display: table-cell; Vertical-align: środek ; wyrównanie tekstu:do środka ) /* koniec #4*/

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

Jest to bardziej szczegółowa opcja z właściwościami, które nie są tak często spotykane w układzie strony internetowej. Niemniej jednak w rzadkich przypadkach są bardzo przydatne.

Wład Merzewicz

Dzięki temu, że zawartość komórek tabeli można jednocześnie wyrównywać w poziomie i w pionie, poszerzają się możliwości kontrolowania położenia elementów względem siebie. Tabele umożliwiają określenie wyrównania obrazów, tekstu, pól formularzy i innych elementów względem siebie i strony internetowej jako całości. Ogólnie rzecz biorąc, wyrównanie jest konieczne głównie w celu ustalenia wizualnych połączeń między różnymi elementami, a także pogrupowania ich.

Centrowanie pionowe

Jednym ze sposobów pokazania odwiedzającemu tematu i nazwy witryny jest użycie strony powitalnej. Jest to pierwsza strona, na której z reguły znajduje się ekran powitalny flash lub obraz wyrażający główną ideę witryny. Obrazek jest także linkiem do innych sekcji serwisu. Musisz umieścić ten obraz na środku okna przeglądarki, niezależnie od rozdzielczości monitora. Można w tym celu wykorzystać tabelę o szerokości i wysokości 100% (przykład 1).

Przykład 1: Centrowanie rysunku

TABELA wyrównania ( szerokość: 100%; /* Szerokość stołu */ wysokość: 100%; /* Wysokość stołu */ )

W tym przykładzie wyrównanie w poziomie jest ustawiane za pomocą parametru znacznika wyrównania="center". , a zawartość komórki może nie być wyśrodkowana w pionie, ponieważ jest to pozycja domyślna.

Aby ustawić wysokość stołu na 100% należy usunąć kod, kod nie będzie już ważny.

Zastosowanie szerokości i wysokości do pokrycia całego dostępnego obszaru strony internetowej gwarantuje, że zawartość tabeli zostanie wyrównana dokładnie na środku okna przeglądarki, niezależnie od jego wielkości.

Wyrównanie poziome

Łącząc atrybuty wyrównania (wyrównanie w poziomie) i valign (wyrównanie w pionie) znacznika dopuszczalne jest ustawienie kilku rodzajów pozycji elementów względem siebie. Na ryc. Rysunek 1 pokazuje sposoby wyrównywania elementów w poziomie.

Przyjrzyjmy się kilku przykładom wyrównania tekstu zgodnie z poniższym rysunkiem.

Górne wyrównanie

Aby określić górne wyrównanie zawartości komórki dla znacznika musisz ustawić atrybut valign na wartość górną (przykład 2).

Przykład 2: Użycie valign

Wyrównanie

Kolumna 1

Kolumna 2

W tym przykładzie charakterystyka komórki jest kontrolowana za pomocą parametrów znacznika , ale wygodniej jest też zmieniać style.

W szczególności wyrównanie komórek jest określone przez właściwości Vertical-align i Text-Align (przykład 3).

Przykład 3: Stosowanie stylów do wyrównania

Kolumna 1

Kolumna 2

Wyrównanie TABELA ( szerokość: 100%; /* Szerokość tabeli */ ) #col1 ( szerokość: 75%; /* Szerokość pierwszej kolumny */ tło: #f0f0f0; /* Kolor tła pierwszej kolumny */ ) #col2 ( szerokość: 25 %; /* Szerokość drugiej kolumny */ tło: #fc5; /* Kolor tła drugiej kolumny */ wyrównanie tekstu: do prawej; /* Wyrównanie do prawej */ ) #col1, #col2 ( wyrównanie do pionu: góra ; / * Wyrównanie do góry */ dopełnienie: 5px /* Marginesy wokół zawartości komórki */ )

Aby skrócić kod, w tym przykładzie zastosowano grupowanie selektorów, ponieważ właściwości wyrównania do pionu i dopełnienia są stosowane do dwóch komórek jednocześnie.

Wyrównanie do dołu odbywa się w ten sam sposób, ale zamiast wartości górnej używany jest dół.

Wyśrodkowanie

Domyślnie zawartość komórek jest wyrównywana do środka ich linii pionowej, więc jeśli kolumny mają różną wysokość, należy ustawić wyrównanie do górnej krawędzi.

Czasami nadal trzeba pozostawić oryginalną metodę wyrównywania, na przykład podczas umieszczania formuł, jak pokazano na ryc. 2.

Wyrównanie

(18.6)

W tym przypadku formuła znajduje się dokładnie na środku okna przeglądarki, a jej numer znajduje się na prawej krawędzi. Do ułożenia elementów w ten sposób potrzebna będzie tabela z trzema komórkami. Najbardziej zewnętrzne komórki powinny mieć te same wymiary, w komórce środkowej wyrównanie odbywa się pośrodku, a w prawej - wzdłuż prawej krawędzi (przykład 4). Ta liczba komórek jest wymagana, aby formuła znalazła się pośrodku.

Przykład 4: Wyrównanie formuły

W tym przykładzie pierwsza komórka tabeli pozostaje pusta; służy ona jedynie do utworzenia wcięcia, które, nawiasem mówiąc, można również ustawić za pomocą stylów.

Wyrównywanie elementów formularza

Korzystając z tabel, wygodnie jest określić położenie pól formularza, zwłaszcza gdy są one przeplatane tekstem. Jedna z opcji projektowania formularza przeznaczonego do wpisania komentarza została pokazana na rys. 3.

Aby tekst obok pól formularza był wyrównany do prawej, a same elementy formularza do lewej, potrzebna będzie tabela z niewidoczną krawędzią i dwiema kolumnami. Lewa kolumna będzie zawierać sam tekst, a prawa kolumna będzie zawierać pola tekstowe (przykład 5).

Przykład 5: Wyrównywanie pól formularza
Wyrównanie
Nazwa

W tym przykładzie dla komórek, w których wymagane jest wyrównanie do prawej strony, dodawany jest atrybut wyrównania="right".

Aby mieć pewność, że etykieta Komentarz zostanie umieszczona na górze tekstu wielowierszowego, odpowiednia komórka jest wyrównana do góry za pomocą atrybutu valign.

Jeśli przetniesz dowolną stronę internetową stworzoną w oparciu o HTML, zobaczysz pewną warstwową strukturę. Co więcej, jego wygląd będzie podobny do ciasta warstwowego. Jeśli tak myślisz, to najprawdopodobniej nie jadłeś przez długi czas. Więc najpierw zaspokój swój głód, a potem powiemy Ci, jak wyśrodkować warstwę div na swojej stronie:

Zalety układu za pomocą tagu

• Istnieją dwa główne typy struktury witryn internetowych:
• Tabelaryczny;

Blok.

Układ tabelaryczny dominował już u początków Internetu. Do jego zalet należy dokładność określonego pozycjonowania. Niemniej jednak ma oczywiste wady. Najważniejsze z nich to długość kodu i niska prędkość ładowania.

Podczas korzystania z układu tabeli strona internetowa nie zostanie wyświetlona, ​​dopóki nie zostanie całkowicie załadowana. Podczas korzystania z bloków div elementy są wyświetlane natychmiast.

Oprócz dużej szybkości ładowania, blokowa budowa strony internetowej pozwala kilkukrotnie zmniejszyć ilość kodu HTML. Między innymi poprzez wykorzystanie klas CSS.

Należy jednak zastosować układ tabelaryczny, aby uporządkować sposób wyświetlania danych na stronie. Klasycznym przykładem jego zastosowania jest ekspozycja tabel.

Konstrukcja bloków oparta na znacznikach nazywana jest również warstwa po warstwie, a same bloki nazywane są warstwami. Dzieje się tak dlatego, że gdy używane są określone wartości właściwości, można je układać jedna na drugiej, podobnie jak warstwy w Photoshopie.

Pomoce do pozycjonowania
W układzie blokowym lepiej jest rozmieszczać warstwy za pomocą kaskadowych arkuszy stylów. Główną właściwością CSS odpowiedzialną za układ jest float.
Składnia właściwości:
pływak: lewy | prawda | żaden | dziedziczyć

• Gdzie:
• w lewo – wyrównaj element do lewej krawędzi ekranu. Opływ pozostałych elementów następuje po prawej stronie;
• po prawej – wyrównanie po prawej stronie, opływ pozostałych elementów – po lewej;
• brak – owijanie niedozwolone;

inherit – dziedziczy wartość elementu nadrzędnego.

#left ( szerokość: 200px; wysokość: 100px; float: lewo; tło: rgb(255,51,102); ) #right ( szerokość: 200px; wysokość: 100px; float: prawo; tło: rgb(0,255,153); ) Lewy blok Prawy blok

Teraz spróbujemy użyć tej samej właściwości, aby umieścić trzeci element div na środku strony. Ale niestety float nie ma wartości środkowej. A kiedy nadasz nowemu blokowi wartość wyrównania w prawo lub w lewo, zostanie on przesunięty w określonym kierunku. Dlatego pozostaje tylko ustawić float: left dla wszystkich trzech bloków:

Ale to też nie jest najlepsza opcja. Przy zmniejszeniu okna wszystkie warstwy układają się w jednym rzędzie w pionie, a przy zwiększeniu rozmiaru przyklejają się do lewej krawędzi okna. Potrzebujemy więc lepszego sposobu na wyśrodkowanie elementu div.

Centrowanie warstw

W kolejnym przykładzie użyjemy warstwy kontenera, w której umieścimy pozostałe elementy. Rozwiązuje to problem przemieszczania się bloków względem siebie przy zmianie rozmiaru okna. Centrowanie kontenera na środku odbywa się poprzez ustawienie właściwości marginesów na zero dla marginesów od górnej krawędzi i auto po bokach (margines: 0 auto ):

#container ( szerokość: 600px; margines: 0 auto; ) #left ( szerokość: 200px; wysokość: 100px; float: lewy; tło: rgb(255,51,102); ) #right ( szerokość: 200px; wysokość: 100px; float : lewy; tło: rgb(0,255,153); #center ( szerokość: 200px; wysokość: 100px; float: lewy; tło: rgb(255,0,0); ) Lewy blok Środkowy blok Prawy blok

Ten sam przykład pokazuje, jak można wyśrodkować element div w poziomie. A jeśli trochę zmodyfikujesz powyższy kod, możesz osiągnąć pionowe wyrównanie bloków. Aby to zrobić, wystarczy zmienić długość warstwy kontenera (zmniejszyć ją). Oznacza to, że po edycji jego klasa css powinna wyglądać następująco:

Po zmianie wszystkie bloki będą ustawione dokładnie w rzędzie pośrodku. A ich położenie nie ulegnie zmianie niezależnie od rozmiaru okna przeglądarki. Oto jak wygląda pionowe centrowanie elementu div:

W poniższym przykładzie użyliśmy szeregu nowych właściwości css do wyśrodkowania warstw w kontenerze:

#container ( szerokość: 450 pikseli; wysokość: 150 pikseli; margines: 0 auto; kolor tła: #66CCFF; ) #left ( szerokość: 100 pikseli; wysokość: 100 pikseli; tło: rgb(255,51,102); wyświetlacz: blok inline; wyrównanie w pionie: środkowy; margines do lewej: 35 pikseli; ) #do prawej ( szerokość: 100 pikseli; wysokość: 100 pikseli; tło: rgb(0,255,153); wyświetlacz: blok inline; wyrównanie w pionie: środek; margines do lewej: 35 pikseli; ) #center (szerokość: 100 pikseli; wysokość: 100 pikseli; tło: rgb(255,0,0); wyświetlacz: blok inline; wyrównanie do pionu: środek; margines do lewej: 35 pikseli; )

Krótki opis właściwości css i ich wartości, których użyliśmy w tym przykładzie do wyśrodkowania elementu div w obrębie elementu div:

• display: inline-block – wyrównuje element blokowy w linię i zapewnia owinięcie go wokół innego elementu;
• Vertical-align: Middle – wyrównuje element na środku względem rodzica;
• margines-lewy – ustawia lewy margines.

Jak zrobić łącze z warstwy

Choć może to zabrzmieć dziwnie, jest to możliwe. Czasami przy układaniu różnych typów menu może być potrzebny blok div jako łącze. Spójrzmy na praktyczny przykład wdrożenia warstwy linków:

#warstwa1(szerokość: 500 pikseli; wysokość: 100 pikseli; tło: rgb(51 255 204); obramowanie: rowek; ) a (wyświetlanie: blok; wyrównanie tekstu: środek; wysokość: 100%; kolor: rgb (255,0,51) ; ) Link do naszej strony internetowej

W tym przykładzie za pomocą linii display: block ustawiamy link do wartości elementu blokowego. Aby cała wysokość bloku div stała się łączem, ustaw wysokość na 100%.

Ukrywanie i pokazywanie elementów blokowych

Elementy blokowe dają większe możliwości rozbudowy funkcjonalności interfejsu niż przestarzały układ tabelaryczny. Często zdarza się, że projekt strony internetowej jest niepowtarzalny i rozpoznawalny. Ale za taką ekskluzywność trzeba zapłacić brakiem wolnego miejsca.

Dotyczy to szczególnie strony głównej, na której koszt reklamy jest najwyższy. Pojawia się zatem problem, gdzie „wcisnąć” kolejny baner reklamowy. I tutaj nie da się uniknąć wyrównania elementu div do środka strony!

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

#warstwa1( wyświetlacz:blok; szerokość: 500 pikseli; wysokość: 100 pikseli; tło: rgb(51 255 204); obramowanie: rowek; ) funkcja show() ( if(warstwa1=="brak") ( warstwa1="blok"; ) else ( warstwa1="brak"; ) document.getElementById("warstwa1").style.display=warstwa1 )

To jest magiczny przycisk. Kliknięcie na niego spowoduje ukrycie lub pokazanie ukrywanego bloku.

W tym przykładzie położenie bloków div nie zmienia się w żaden sposób. Wykorzystuje prostą funkcję JavaScript, która zmienia wartość właściwości wyświetlania css po kliknięciu przycisku (zdarzenie onclick).

składnia wyświetlania:
wyświetlacz: blok | wbudowany | blok inline | tabela inline | pozycja listy | żaden | docieranie | stół | podpis tabeli | komórka-tabela | grupa-kolumn-tabeli | kolumna tabeli | grupa stopek tabeli | grupa-nagłówków tabeli | rząd tabeli | grupa-wierszy-tabeli

Jak widać właściwość ta może przyjmować wiele wartości. Dlatego jest bardzo przydatny i można go wykorzystać do pozycjonowania elementów. W jednym z poprzednich przykładów użyliśmy jednej z jej wartości (inline-block ), aby wyśrodkować element div w obrębie elementu div.

Użyliśmy dwóch wartości właściwości display, aby ukryć i pokazać warstwę.