Dom Bezpieczeństwo Poziome i pionowe wyrównanie elementów. Jak zrobić wyrównanie tekstu w środku, szerokość, krawędzie strony w HTML

Poziome i pionowe wyrównanie elementów. Jak zrobić wyrównanie tekstu w środku, szerokość, krawędzie strony w HTML

Wyrównywanie elementów w pionie i poziomie można wykonać na 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 pudełko ma ustawioną szerokość i wysokość i musi być wyśrodkowane na pudełku nadrzędnym:

.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

Trochę tekstu tutaj

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

Bardzo często zadaniem jest wyrównanie bloku do środka strony/ekranu, a nawet tak, aby bez skryptu java, bez ustawiania twardych rozmiarów czy ujemnych wcięć, tak aby paski przewijania działały na rodzica, jeśli blok przekroczy swój rozmiar. W sieci jest sporo monotonnych przykładów, jak wyrównać blok do środka ekranu. Z reguły większość z nich opiera się na tych samych zasadach.

Poniżej znajdują się główne sposoby rozwiązania problemu, ich zalety i wady. Aby zrozumieć istotę przykładów, zalecam zmniejszenie wysokości/szerokości okna Wynik w przykładach pod wskazanymi linkami.

Opcja 1. Dopełnienie ujemne.

Pozycjonowanie blok atrybuty górny i lewy o 50%, a znając z góry wysokość i szerokość bloku, ustaw margines ujemny, który jest równy połowie rozmiaru blok. Ogromny minus ta opcja jest to, że musisz liczyć ujemne wcięcia. Ta sama droga blok zachowuje się nie do końca poprawnie w środowisku scrollbarów - jest po prostu odcięty, ponieważ ma ujemne wcięcia.

Parent ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; ) .block ( szerokość: 250px; wysokość: 250px; pozycja: bezwzględna; góra: 50%; lewa : 50%; margines: -125px 0 0 -125px; img (max-szerokość: 100%; wysokość: auto; wyświetlanie: blok; margines: 0 auto; obramowanie: brak; ) )

Opcja 2: wcięcie automatyczne.

Mniej powszechne, ale podobne do pierwszego. Do blok ustaw szerokość i wysokość, ustaw prawy górny dolny lewy atrybut na 0 i ustaw margines automatyczny. Zaletą tej opcji są działające paski przewijania rodzic, jeśli ta ostatnia ma 100% szerokości i wysokości. Minusem tej metody jest sztywne zaklejanie.

Parent ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; ) .block ( szerokość: 250px; wysokość: 250px; pozycja: bezwzględna; góra: 0; prawo: 0; dół: 0; lewy: 0; margines: auto; img ( maksymalna szerokość: 100%; wysokość: auto; wyświetlacz: blok; margines: 0 auto; obramowanie: brak; ) )

Opcja 3. Tabela.

Pytamy rodzic style tabeli, komórka rodzic Ustaw wyrównanie tekstu do środka. ALE blok ustawić wbudowany model blokowy. Wadą są nie działające paski przewijania, aw ogóle nie estetyka „emulowania” tabeli.

Parent ( szerokość: 100%; wysokość: 100%; display: table; position: bezwzględna; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block (wyświetlanie: inline-block; img (wyświetlanie: blok; obramowanie: brak; ) )

Aby dodać zwój do tego przykładu, będziesz musiał dodać jeszcze jeden element do struktury.
Przykład: jsfiddle.net/serdidg/fk5nqh52/3 .

Opcja 4. Pseudoelement.

Ta opcja jest pozbawiona wszystkich problemów wymienionych w poprzednich metodach, a także rozwiązuje oryginalne zadania. Chodzi o to, aby mieć rodzic ustawić style pseudoelement wcześniej, a mianowicie 100% wysokości, wyrównania do środka i modelu prostopadłościennego. Tak samo z blok umieść model bloku inline, wyrównanie środka. Do blok nie spadła pseudoelement gdy wymiary pierwszego są większe niż rodzic, określ rodzic white-space: nowrap i font-size: 0 po czym y blok anuluj te style za pomocą następującego - spacja: normalna. W ten przykład font-size: 0 jest potrzebne, aby usunąć wynikową spację między rodzic oraz blok w związku z formatowaniem kodu. Lukę można usunąć na inne sposoby, ale uważa się, że najlepiej po prostu na to nie pozwalać.

Parent ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; białe znaki: nowrap; text-align: center; font-size: 0; &:before ( wysokość: 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img ( wyświetlacz: blok; obramowanie: brak; ) )

Lub, jeśli chcesz, aby rodzic zajmował tylko wysokość i szerokość okna, a nie całą stronę:

Rodzic ( pozycja: ustalona; góra: 0; prawo: 0; dół: 0; lewy: 0; przepełnienie: auto; białe znaki: nowrap; text-align: center; font-size: 0; &:before ( wysokość: 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img (wyświetlanie: blok; obramowanie: brak; ) )

Opcja 5. Flexbox.

Jednym z najprostszych i najbardziej eleganckich sposobów jest użycie flexboxa. Nie wymaga zbędnych ruchów ciałem, dość wyraźnie opisuje istotę tego, co się dzieje i ma dużą elastyczność. Jedyna rzecz do zapamiętania przy wyborze Ta metoda- wsparcie dla IE od wersji 10 włącznie. caniuse.com/#feat=flexbox

Parent ( szerokość: 100%; wysokość: 100%; pozycja: stała; góra: 0; lewa: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( tło: #60a839; img ( wyświetlanie: blok; obramowanie: brak; ) )

Opcja 6. Przekształć.

Nadaje się, jeśli jesteśmy ograniczeni strukturą i nie ma możliwości manipulowania element nadrzędny, a blok musi być jakoś wyrównany. Z pomocą przyjdzie funkcja translate() css. O wartości 50% pozycjonowanie bezwzględne ustawi lewy górny róg pudełka dokładnie wyśrodkowany, a ujemna wartość translacji przesunie pudełko względem jego własnych wymiarów. Należy pamiętać, że negatywne efekty mogą pojawić się w postaci rozmytych krawędzi lub stylu czcionki. Również podobna metoda może prowadzić do problemów z obliczeniem położenia bloku za pomocą java-scriptu "a. Czasami, aby zrekompensować utratę 50% szerokości z powodu użycie css lewej właściwości może pomóc reguła ustawiona dla bloku: margin-right: -50%; .

Parent ( szerokość: 100%; wysokość: 100%; pozycja: ustalona; góra: 0; lewa: 0; przepełnienie: auto; ) .block ( pozycja: bezwzględna; góra: 50%; lewa: 50%; transform: translate( -50%, -50%); img (wyświetlanie: blok;) )

Opcja 7. Przycisk.

Opcja użytkownika gdzie blok zawinięty w metkę z guzikiem. Przycisk ma możliwość wyśrodkowania wszystkiego, co się w nim znajduje, czyli elementów modelu inline i block-line (inline-block). W praktyce nie polecam.

Parent ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; tło: brak; obramowanie: brak; kontur: brak; ) .block ( display: inline-block; img ( wyświetlacz: blok;; obramowanie: brak; ) )

Premia

Korzystając z idei czwartej opcji można ustawić marginesy dla blok, a jednocześnie te ostatnie będą odpowiednio wyświetlane w środowisku suwaków.
Przykład: jsfiddle.net/serdidg/nfqg9rza/2 .

Możesz również wyrównać obrazek do środka, a jeśli obrazek jest większy rodzic, skaluj go do rozmiaru rodzic.
Przykład: jsfiddle.net/serdidg/nfqg9rza/3 .
Przykład dużego obrazu:

Vlad Merzhevich

Dzięki temu, że zawartość komórek tabeli może być jednocześnie wyrównywana w poziomie i w pionie, rozszerzane są możliwości kontrolowania położenia elementów względem siebie. Tabele umożliwiają ustawienie 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 niezbędne głównie do ustanowienia wizualnego połączenia między różnymi elementami, a także do ich pogrupowania.

Centrowanie w pionie

Jednym ze sposobów, aby pokazać odwiedzającym, na czym skupia się i jaki jest tytuł witryny, jest użycie strony powitalnej. To pierwsza strona, na której z reguły znajduje się flash-intro lub obrazek wyrażający główną ideę serwisu. Obraz jest również linkiem do innych sekcji serwisu. Wymagane jest umieszczenie tego obrazu na środku okna przeglądarki, niezależnie od rozdzielczości monitora. W tym celu możesz użyć tabeli o szerokości i wysokości równej 100% (przykład 1).

Przykład 1: Centrowanie obrazu

wyrównanie

W tym przykładzie wyrównanie w poziomie jest ustawiane za pomocą parametru znacznika align="center" , a zawartość komórki nie musi być wyśrodkowana w pionie, ponieważ ta pozycja jest ustawiona domyślnie.

Aby ustawić wysokość stołu na 100%, usuń, kod nie jest już ważny.

Wykorzystanie szerokości i wysokości dla całego dostępnego obszaru strony gwarantuje, że zawartość tabeli będzie wyrównana ściśle na środku okna przeglądarki, niezależnie od jej wielkości.

Wyrównanie w poziomie

Łącząc atrybuty align (poziome wyrównanie) i valign ( wyrównanie w pionie) tag , dopuszczalne jest ustawienie kilku typów pozycji elementów względem siebie. Na ryc. 1 pokazuje, jak wyrównać elementy w poziomie.

Spójrzmy na kilka przykładów wyrównania tekstu zgodnie z poniższym rysunkiem.

Wyrównanie do góry

Aby określić wyrównanie zawartości komórki do góry, dla znacznika wymagane jest ustawienie atrybutu valign z wartością top (przykład 2).

Przykład 2: Używanie 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: Zastosuj style do wyrównania

wyrównanie

Kolumna 1

Kolumna 2

Aby skrócić kod, w tym przykładzie zastosowano grupowanie selektorów, ponieważ właściwości wyrównania w pionie 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 góry używane jest dolne.

Wyśrodkowanie

Domyślnie zawartość komórki jest wyrównana do środka jej pionu, więc w przypadku różnych wysokości kolumn wymagane jest ustawienie wyrównania do góry. Czasami nadal trzeba pozostawić pierwotną metodę wyrównania, na przykład podczas umieszczania formuł, jak pokazano na rys. 2.

W tym przypadku formuła znajduje się dokładnie na środku okna przeglądarki, a jej numer znajduje się na prawej krawędzi. Do takiego rozmieszczenia elementów potrzebny jest stół z trzema komórkami. Zewnętrzne komórki powinny mieć ten sam rozmiar, w środkowej komórce wyrównanie odbywa się w środku, a w prawej komórce - na prawej krawędzi (przykład 4). Ta liczba komórek jest wymagana, aby zapewnić wyśrodkowanie formuły.

Przykład 4: Wyrównanie wzoru

wyrównanie

(18.6)

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

Wyrównywanie elementów formularza

Tabele są przydatne do pozycjonowania pól formularzy, zwłaszcza gdy są przeplatane tekstem. Jedną z opcji projektowania formularza, która ma na celu wprowadzenie komentarza, pokazano na ryc. 3.

Aby tekst w pobliżu pól formularza był wyrównany do prawej, a same elementy formularza do lewej, potrzebna jest tabela z niewidocznym obramowaniem i dwiema kolumnami. Lewa kolumna będzie zawierała sam tekst, a prawa kolumna będzie zawierała pola tekstowe (przykład 5).

Przykład 5 Wyrównywanie pól formularza

wyrównanie

W tym przykładzie atrybut align="right" został dodany dla komórek, które wymagają wyrównania do prawej. Aby etykieta „Komentarz” znajdowała się na górnej krawędzi tekstu wielowierszowego, odpowiednia komórka jest ustawiona jako wyrównana do góry za pomocą atrybutu valign.