Jak wyrównać tekst w pionie w CSS

Tekst można łatwo dodać w dowolnym miejscu, ale bez wyrównania może wyglądać bezpresjonalnie i mniej atrakcyjny. Niezadowolony tekst może również zakłócać cały wygląd strony internetowej. Aby poradzić sobie z takimi rzeczami w aplikacjach internetowych, możemy użyć niektórych przydatnych właściwości CSS, które pomogą ci w mgnieniu oka.

W tym artykule pokaże, jak wyrównać tekst w pionie w CSS.

Jak wyrównać tekst w pionie w CSS?

W CSS możesz użyć poniższych właściwości, aby wyrównać tekst w pionie:

• • Własność linii
  • Wyświetl i wyrównanie właściwości-elementów

Teraz przejdźmy do każdej metody jeden po drugim!

Metoda 1: Korzystanie z właściwości wysokości linii do wyrównania tekstu pionowego w CSS

„„Wysokość linii„Własność określa obszar poniżej i w górę elementów inline. Ustawia odległość tekstu z innych elementów. Korzystając z właściwości linii, tekst można łatwo wyrównać pionowo do środka.

Przykład

Oto tekst wewnątrz pudełka (granicy) znajdujący się obecnie w lewym górnym rogu. Wyrównajmy ten tekst do środka pionowo i poziomo:

Aby to zrobić, dodaj pojemnik „”W obrębie znacznika pliku HTML i określ wymagany tekst:

Najlepsza strona internetowa edukacyjna!

Pudełko jest tworzone za pomocą „3px„Border i”250px" wysokość. „„rozmiar czcionki„Właściwość jest używana z wartością”24px„Aby czcionka była widoczna. Przydzielimy Div „Wysokość linii" z "250px”W celu wyrównania tekstu pionowego pośrodku. Następnie użyjemy „tekst-align„Własność do wyrównania tekstu w centrum:

div
Wysokość linii: 250px;
Text-Align: Center;
Rozmiar czcionki: 24px;
Wysokość: 250px;
Border: 3px Solid;

Jak widać, tekst został wyrównany pionowo do centrum za pomocą wysokości linii i poziomo do centrum z właściwością tekstu tekstu.

Teraz przejdźmy do następnej metody.

Metoda 2: Korzystanie z właściwości wyświetlania i wyrównania-elementów do wyrównania tekstu w pionie w CSS

"Flexbox”To jednowymiarowy układ, który pozwala sformatować HTML. Możesz także użyć go do wyrównania elementów pionowo lub poziomo.

Więc weźmy przykład i wyrównaj tekst w pionie za pomocą Flexbox.

Przykład

Przede wszystkim sprawimy, że nasz kontener był elastyczny, ustalając wartość „wyświetlacz„Nieruchomość jako„przewód". Następnie użyj „Wyrównanie„Własność do ustawiania treści w centrum pionowym. Ponadto, aby wyrównać treść w środku w poziomie, „justify-content„Własność zostanie użyta:

div
Wyświetlacz: Flex;
Wyrównanie: Center;
Justify-Content: Center;
Rozmiar czcionki: 24px;
Wysokość: 200px;
Border: 3px Solid;

Określony tekst został pomyślnie dostosowany do centrum:

Podaliśmy metody związane z wyrównaniem tekstu w pionie w CSS.

Wniosek

W CSS tekst można łatwo wyrównać pionowo z pomocą „Wysokość linii" nieruchomość. Możesz także skorzystać z „Flexbox„Dla pionowego wyrównania tekstu z”wyświetlacz" I "Wyrównanie" nieruchomości. FlexBox to jednowymiarowy układ i jest po prostu używany do pionowego lub poziomego wyrównania elementów. Ten post oferował dwie najłatwiejsze metody, które pomogą Ci wyrównać tekst w pionie w CSS.