Sekcja treści jest wyśrodkowana. Wyśrodkuj wyrównanie w CSS. Wyśrodkuj element typu string lub string-*

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. Zazwyczaj 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: początek– 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 zachowuje się jak prawy, przy pisaniu od prawej do lewej – lewy).

Opowiem Ci o małej sztuczce. Podczas wybierania wartości uzasadniać ostatnia linka może nieestetycznie zwisać z 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.

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

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 CSS dostępna jest specjalna wielowartościowa właściwość Vertical-align służąca do wyrównywania w pionie. 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
• rozciąganie,
• 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ą.

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 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, że wewnętrzny blok jest wyrównany poziomo, ale nie pionowo:
http://jsfiddle.net/c1bgfffq/

Dlaczego to 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

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 utworzenie tabeli wymaga dodania kolejnego elementu wokół zewnętrznego bloku.

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.

Wyrównanie za pomocą wcięć

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

Zewnętrzna ( wysokość: 200 pikseli; wysokość linii: 200 pikseli; ) .inner ( biała spacja: nowrap; przepełnienie: ukryte; )
http://jsfiddle.net/c1bgfffq/12/

Tej techniki można również użyć do wyrównywania tekstu wielowierszowego, jeśli ponownie zdefiniujesz wartość wysokości linii dla bloku wewnętrznego, a także dodasz reguły display: inline-block i Vertical-align: środkowy.

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”

Aby to zrobić, potrzebujesz:

1. ustawić pozycjonowanie względne do bloku zewnętrznego i pozycjonowanie absolutne do bloku wewnętrznego;
2. 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;
3. ustaw pionowe dopełnienie wewnętrznego bloku na auto.

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

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ą

Zewnętrzna ( pozycja: względna; ) .inner ( 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

Blok zewnętrzny musi być ustawiony na wyświetlanie: flex, a blok wewnętrzny na margines: auto. I to wszystko! piękne, nieprawdaż?

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ć?

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

Analizujemy wyrównanie elementów blokowych w CCS. Umieszczamy kilka na środku DZIAŁ Lub LI elementy. W większości przypadków oferuję kilka moich opcji.

Celem tego artykułu nie jest wypisanie wszystkich opcji wyrównania i przepisanie tego, co już gdzieś istnieje. Nie pamiętam dlaczego, ale często nie byłem zadowolony z oferowanych opcji. Albo były stałe bloki, albo wszystko się rozpadło podczas adaptacyjnego układu, albo jakieś inne niedociągnięcia.

Czasami, aby wyrównać do środka, wystarczy dodać kilka atrybutów i nie potrzeba nic skomplikowanego. Na przykład ja też.

Poniżej znajduje się kilka opcji układu adaptacyjnego w celu wyrównywania bloków pośrodku, które I używam na swoich stronach internetowych. A jeśli ta pierwsza jest dość powszechna, to być może niektóre inne metody nie zostaną nawet opisane w Internecie dokładnie w ten sposób.

opcja 1

Proste wyrównanie wszystkich bloków do środka strony.

Wyśrodkujmy Zawartość UL z 4 elementów LI, które znajdują się w bloku DZIAŁ z klasą pojemnik.

W tym przypadku wystarczą następujące reguły CSS:

Pojemnik (
szerokość: 100%;
}

Kontener ul (
wyrównanie tekstu: do środka;
styl listy: brak;
}

Kontener Li (
wyświetlacz: blok inline;
}

Otrzymujemy następujący widok: W środku znajdują się 4 elementy LI. Po zmniejszeniu rozmiaru ekranu elementy, które nie mieszczą się, są przesuwane w dół.

Jeśli bloki LI z tymi właściwościami nie są zainstalowane w środku, co oznacza, że ​​przeszkadza im jakaś inna nieruchomość. Może to być na przykład nieruchomość pływak: w lewo Lub wyświetlacz: stół; lub jakiś inny.

Możesz teraz dodać inne style do górnej struktury (do podstawowej struktury wyrównywania CSS). Na przykład utwórz bloki o stałym rozmiarze i wcinaj się nawzajem:

Kontener Li (
wyświetlacz: blok inline;
margines: 5px;
szerokość: 100px;
}

Otrzymujemy co następuje:

Ale ta opcja ma jedną wadę. Bloki znajdują się w centrum, ale są ogromne odległości na lewo i prawo. Można je zmniejszyć zmieniając szerokość.

Lub możesz zrobić pojemniki tego samego rozmiaru, aby wcięcia były tylko między pojemnikami, a nie było ich po lewej i prawej stronie.

Potem usuniemy margines i dodaj szerokość tego szerokość tak, aby całkowicie zakrył obszar.

Kontener Li (
wyrównanie w pionie: góra;
wyświetlacz: blok inline;
szerokość: 32,899%;
}

Pomiędzy blokami będzie niewielki obszar pustej przestrzeni. Aby uczynić go jeszcze większym, możesz wycofać się do środka za pomocą parametru wyściółka.

W blokach celowo nie dodaję niczego dodatkowego, aby pozostawić dokładnie te style, które bezpośrednio wpływają na wyrównanie. Ale jeśli zrobisz to samo, nie dostaniesz takich bloków. Choćby dlatego, że po pierwsze trzeba dodać kolor do bloku, a po drugie, jeśli jest pusty, umieścić wysokość: 100px;. Inne atrybuty są według twoich upodobań.

Ostatnia opcja to:

Na powyższym zrzucie ekranu pozostawiłem inne obszary witryny, aby było jasne, gdzie są granice bloków, ponieważ jeśli przylegają do krawędzi, to sama krawędź nie jest już widoczna. A na zdjęciu białe krawędzie po lewej i prawej stronie to inne ustawienie, które nie ma nic wspólnego z omawianym przykładem. Powtarzam, same bloki przylegają do krawędzi, które są niewidoczne, ponieważ bloki całkowicie je zakrywają.

Opcja 2

Istnieje wiele sposobów centrowania bloków. Ale jeśli chcesz, aby wyrównanie było mądrzejsze, musisz się nieźle nagimnastykować. Na szczęście wymyśliłem interesującą metodę do następujących celów:

Jak wyśrodkować wszystkie elementy div, aby blok w następnej linii był wyrównany do lewej strony?

Mamy następującą strukturę:

Piszemy dla nich zajęcia:

szerokość: 90%;
margines: 0 auto;
}

Artykuł archiwalny (
wyświetlacz: blok inline;
wyrównanie w pionie: góra;

Szerokość: oblicz (33,3333% - (0,666666666667 * 36px));
margines: 0 10px 0 11px;
}

Należy pamiętać, że w przypadku zmiany rozmiaru oblicz, następnie musisz eksperymentalnie dostosować wymiary margines. W przeciwnym razie bloki nie zostaną wyśrodkowane.

To ustawienie należy wykonać na oko. Ale jeśli w nowej linii jest mniej bloków niż w linii powyżej, ten samotny blok będzie lewa strona. I wygląda to dużo ładniej niż wtedy, gdy w następnej linii znajduje się pojedynczy blok w centrum.

Stosując powyższą technikę, otrzymamy układ adaptacyjny, z równymi wszystkimi krawędziami, który nie ulegnie pogorszeniu przy zmianie rozmiaru ekranu.

A jeśli chcemy, żeby wersja mobilna miała nie 3 bloki, a 2, to w CC dla rozdzielczości 768 pikseli podzielimy bloki inaczej:

Ekran @media i (maksymalna szerokość: 768 pikseli) (
.archiwum-artykuł (
szerokość: oblicz (47,3333% - (0,666666666667 * 25px));
margines: 0 10 pikseli 0 20 pikseli;
}
}

Zdobądźmy te same bloki w wersji mobilnej, ale z dwoma blokami w linii:

Opcja 3

Teraz wyrównamy za pomocą przewód. Może się to wydawać idealnym sposobem na wyrównanie poziomu, ponieważ w rzeczywistości działa bardzo prosto. Jednak FLEX nie radzi sobie z zadaniem opisanym w opcji 2. Przynajmniej mi nie udało się osiągnąć takich rezultatów.

Do następnej sekcji:

Dodawanie stylów:

#cssmenu (
margines: 20px automatyczny;
}

#cssmenu ul (
styl listy: brak;
wyświetlacz: elastyczny;
owinięcie elastyczne: owinięcie;
justify-content: środek;
}

#cssmenu > ul > li (
margines: 1px;
}

Otrzymujemy:

W podanym przykładzie:

owinięcie elastyczne: owinięcie;

Przenosi bloki do następnej linii, jeśli zapełniają pojemnik. W przeciwnym razie wyjdą dalej poza okno przeglądarki.

justify-content: środek;

Wyrównujemy zawartość bloków do środka.

Opcja 4

Kolejna opcja wyrównania wykorzystująca technologię flex.

Mamy kontener, w którym znajdują się dwa bloki. Potrzebujemy tych 2 bloków, aby podzielić szerokość na dwa równe boki.

Aby to zrobić, napiszemy w stylach następujące właściwości:

Pojemnik (
wyświetlacz: elastyczny;
}

Blok (
podstawa elastyczna: 100%;
}

Opcja 5

Istnieje inna opcja centrowania bloków, jeśli ich liczba jest ściśle równa. Na przykład: jest 9 bloków, po 3 w każdej linii. I wiesz, że tak zawsze pozostanie. Przykładowo tworzysz stronę docelową i wiesz na pewno, że pomiędzy tymi blokami na stronie nie zostanie dodane nic niepotrzebnego.

Mamy więc 9 bloków następującego typu (nie powieliłem linii 9 razy, ale pamiętaj, że jest 9 bloków):

Zastosuj dla nich style:

Kontener-archiwum-artykułów (
szerokość: 100%;
wyrównanie tekstu: do środka;
}

Artykuł archiwalny (
szerokość: 25%;
wyrównanie w pionie: góra;
wyświetlacz: blok inline;
wyrównanie tekstu: do lewej;
}

Artykuł w archiwum:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margines: 20px 0 30px 40px;
}

Artykuł w archiwum:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
margines: 20px 40px 30px;
}

Artykuł w archiwum:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
margines: 20px 40px 30px 0;
}

Otrzymamy także układ adaptacyjny. Po zmniejszeniu ekranu blok, który nie pasuje, przejdzie na środek dolnego rogu

Zaletą tego typu centrowania jest to, że można wyraźnie i wyraźnie wykonać wcięcia pomiędzy blokami.

Główną wadą jest to, że wewnątrz bloków nie można niczego umieścić. Dowolny element:

albo div Lub P lub coś innego, będzie uważane za element wewnętrzny n-te dziecko. W rezultacie zostaną na niego nałożone style CSS, a wszelkie wcięcia wykonane przy użyciu marginesu spowodują przesunięcie bloków inaczej niż pierwotnie zamierzono.