Change language
Python.Engineering Wiki Główny tekst JavaScript

Główny tekst JavaScript

absolute | code Python module | COM PHP module | dis Python module | Ev PHP module | html Python module | http Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | SPL PHP module | StackOverflow | UI PHP module
Michael Zippo Michael Zippo

W tym samouczku CSS zobaczymy, jak wyśrodkować tekst i zablokować elementy. Istnieje kilka wskazówek, których możesz użyć, aby wyśrodkować elementy w układzie w poziomie i pionie.

Aby wyśrodkować wyrównany tekst w większym elemencie, użyj text-align: center;, jak pokazano poniżej :

Jestem a div

Cały tekst jest wyśrodkowany przez text-align: center

Alignment central elementy blokowe:

Centrowanie elementów blokowych najlepiej zilustrować za pomocą znacznika dokumentu HTML. Musisz sprawdzić całkowitą szerokość kontenera, a następnie ustawić margines na auto:

Jestem div

Cały tekst jest wyśrodkowany za pomocą text-align: center

Wyrównaj obraz do środka:

Aby wyśrodkować obraz, w selektorze CSS zmodyfikuj wyświetlanie masy, a następnie kontroluj szerokość elementu obrazu, używając % lub px. Ustaw margin na auto:

Jestem div

Cały tekst jest wyśrodkowany za pomocą text-align: center

Aby wyśrodkować obraz bazowy, zmień wyświetlanie na blok, a następnie ustaw marginesy na auto, sprawdź szerokość za pomocą px lub%

kocięta

Wyśrodkuj w pionie i poziomie w div:

dopełnienie:

Aby wyśrodkować w pionie w - możesz następnie użyć text-align: center, aby wyśrodkować akapit w poziomie: < br >

Jestem div

Cały tekst jest wyśrodkowany za pomocą text-align: center

Aby wyśrodkować obraz bazowy, zmień wyświetlanie na blok, a następnie ustaw marginesy na auto, sprawdź szerokość za pomocą px lub%

kocięta

line-height:

Możesz również ustawić wysokość linii na wysokość elementu blokowego, który jest wyśrodkowany za pomocą tekstu -align: center, aby wyrównać element do środka. Jeśli masz wiele wierszy, użyj line-height dla elementu nadrzędnego i podrzędnego, a do elementu podrzędnego dodaj vertical-align: middle i display: inline-block:


transform:

Innym sposobem na wyśrodkowanie elementów jest użycie pozycji i transformacji. Umieść rodzica na pozycji: względny, dziecko na pozycji bezwzględnej. Element potomny będzie musiał być umieszczony na górze i na lewo na 50%, a następnie użyjemy właściwości transform, aby dostosować tekst w div. Porozmawiamy więcej o tej właściwości w innym artykule, więc jest w porządku, jeśli w tej chwili nie jest ona w 100% jasna:


flexbox:

Wreszcie możemy wyśrodkować elementy za pomocą flexboxa. Ustaw wyświetlanie: flex na element nadrzędny dzieci, które chcesz wyśrodkować, a następnie użyj align-items i require-content, aby go wyśrodkować:


Są to najczęstsze sposoby rozwiązania problemu centrowania elementów w układzie.