CSS zapewnia różne style wyrównania, takie jak lewy, prawy, środek, uzasadniony, poziomy i pionowy, dla różnych rodzajów treści. Mówiąc dokładniej, na kierunku i krótkie linie, „Centrum„Używany jest styl wyrównania. Korzystając z tego stylu, pojawienie się treści można ulepszyć i będzie wyglądał schludnie.

W tym artykule wyjaśniono różne metody koncentracji tekstu pionowego. A więc zacznijmy!

Jak wyśrodkować tekst pionowo w CSS?

Istnieje wiele sposobów koncentrowania tekstu w pionie, takich jak „Flexbox”,„Wysokość linii”,„wyściółka”,„przekształcać”I„ „platforma" nieruchomość. W tej sekcji dowiemy się o niektórych wymienionych właściwościach, aby skoncentrować tekst pionowo w CSS. Ale wcześniej pokażemy procedurę tekstu wyrównanego.

Przykład

W HTML utworzymy pojemnik z klasą o nazwie „Centrum”I wewnątrz utworzy nagłówek za pomocą

etykietka:

„Działanie bez oczekiwań”

Następnie przejdź do pliku CSS i stygnij utworzony w pliku HTML.

Tutaj ".Centrum”Służy do dostępu do klasy, którą przypisaliśmy do . Następnie ustawimy szerokość utworzonego pojemnika, aby „450px”I wysokość do„200px". Ustawiamy również granicę korzystania z „granica”Właściwość i przypisz wartość granicy„10px" I "podwójnie”:

.Centrum
szerokość: 450px;
Wysokość: 200px;
granica: 7px podwójny;

Po wdrożeniu powyższego kodu otrzymujemy następujący wynik:

Tutaj widzimy, że tekst jest pokazany w lewym górnym rogu ekranu. Teraz przechodzimy do następnego kroku, w którym opiszemy różne metody, aby wyśrodkować tekst pionowo za pomocą CSS.

Metoda 1: Tekst środkowy pionowo w CSS za pomocą Flex

CSS „przewód”To wartość„wyświetlacz" nieruchomość. Służy do ustawiania treści lub elementów zgodnie z ich rozmiarem. Pozwala efektywnie układać elementy CSS, tworząc między nimi równą przestrzeń.

Składnia

Wyświetlacz: Flex

Więc kontynuujmy poprzedni przykład, aby scentralizować tekst w pionie.

Przykład

Aby ustawić pozycję tekstu w środku i pionowym, przypisamy wartość właściwości wyświetlania jako „przewód”I wyrównane elementy jako„Centrum”:

.Centrum
szerokość: 450px;
Wysokość: 200px;
granica: 7px podwójny;
Wyświetlacz: Flex;
Wyrównanie: Center;

To da nam następujący wynik:

Tutaj widzimy, że nasz tekst jest ustawiony pionowo, a także w centrum Div. Teraz przejdziemy do drugiej metody.

Metoda 2: Środek tekst pionowo w CSS przy użyciu właściwości linii wysokości linii

„„Wysokość linii”Własność określa wysokość między dwiema liniami w elementach. Służy do tworzenia przestrzeni między dwoma wierszami o tekście.

Składnia

Składnia właściwości wysokości linii jest podana jako:

Wysokość linii: wartość

W powyższej składni określamy wysokość linii jako „wartość".

Notatka: W właściwości wysokości linii nie możemy podać wartości ujemnej.

Przykład

Teraz wykorzystamy właściwość linii, aby ustawić tekst w pionowym środku . Aby to zrobić, w pliku CSS, ustaw wartość właściwości linii, aby „150px”:

.Centrum
szerokość: 450px;
Wysokość: 200px;
granica: 7px podwójny;
Wysokość linii: 150px;

To da nam następujący wynik:

Metoda 3: Środkowy tekst pionowo w CSS za pomocą wyściółki

Aby stworzyć przestrzeń między granicą elementu a jej treścią, „wyściółka„Własność jest używana. Jest to krótka właściwość CSS, którą można wykorzystać do ustawienia wyściółki ze wszystkich stron w jednej linii.

Składnia

Składnia właściwości wyściółki to:

Wyściółka: górny prawy dolny lewy

Oto opis powyższych wartości wspomnianej właściwości:

• szczyt: Służy do tworzenia miejsca z góry.
• Prawidłowy: Służy do tworzenia przestrzeni z prawej strony.
• przycisk: Służy do tworzenia przestrzeni od dołu.
• lewy: Służy do tworzenia przestrzeni od lewej.

Notatka: Określenie dwóch wartości oznacza wyściółkę od górnego i dolnego i wyściółka od lewej i prawej; Jeśli jednak zostanie dodana jedna wartość, wyściółka zostanie zastosowana do wszystkich czterech stron.

Przykład

Tutaj ustawimy wartość wyściółki jako „10%" I "0%”, Gdzie pierwsza wartość wskazuje na górną i dolną wyściółkę, a druga wskazuje wyściółkę od lewej i prawej. Ponadto chcemy jedynie scentralizować tekst w pionie, więc ustawimy drugą wartość na „0”:

.Centrum
granica: 7px podwójny;
Wyściółka: 10% 0;

Po wdrożeniu danego kodu przejdź do pliku HTML, uruchom go i sprawdź następujące dane wyjściowe:

Podaliśmy różne metody związane z centralnym wyrównaniem tekstu pionowo w CSS.

Wniosek

Aby skoncentrować tekst w pionie, użyj „Flexbox”,„Wysokość linii" I "wyściółka„Właściwości CSS. Te właściwości pozwalają ustawić wysokość w obrębie zawartości i granicy elementu. W tym artykule wyjaśniamy, jak wyśrodkować tekst pionowo przy użyciu trzech różnych metod i podajemy przykład każdej metody.