Tekst można łatwo dodać w dowolnym miejscu, ale bez wyrównania może wyglądać nieprezentalnie i mniej atrakcyjnie. Niewyrównany tekst może również zaburzyć cały wygląd strony internetowej. Aby poradzić sobie z takimi sprawami w aplikacjach internetowych, możemy wykorzystać przydatne właściwości CSS, które pomogą Ci błyskawicznie wyrównać teksty.
Ten artykuł 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łaściwość wysokości linii
- właściwości wyświetlania i wyrównania elementów
Teraz przejrzyjmy każdą metodę jeden po drugim!
Metoda 1: Używanie właściwości line-height do wyrównania tekstu w pionie w CSS
„ Wysokość linii Właściwość ” określa obszar poniżej i w górę elementów śródliniowych. Ustawia odległość tekstu od innych elementów. Korzystając z właściwości line-height, tekst można łatwo wyrównać w pionie do środka.
Przykład
Oto tekst w ramce (obramowaniu) znajdującej się obecnie w lewym górnym rogu. Wyrównajmy ten tekst do środka w pionie i poziomie:
Przejdźmy teraz do następnej metody. “ Flexbox ” to jednowymiarowy układ, który umożliwia formatowanie kodu HTML. Możesz go również użyć do wyrównania elementów w pionie lub poziomie. Weźmy więc przykład i wyrównaj tekst w pionie za pomocą flexboxa. Przykład Przede wszystkim uelastycznimy nasz kontener, ustawiając wartość „ wyświetlacz ” właściwość jako „ przewód ”. Następnie użyj „ wyrównaj-elementy ” właściwość do ustawiania treści na środku w pionie. Ponadto, aby wyrównać zawartość na środku w poziomie, „ uzasadnić-treść ” zostanie użyta właściwość: W CSS tekst można łatwo wyrównać w pionie za pomocą „ Wysokość linii ' własność. Możesz również skorzystać z „ Flexbox “ dla pionowego wyrównania tekstu z “ wyświetlacz ' oraz ' wyrównaj-elementy ' nieruchomości. Flexbox jest układem jednowymiarowym i służy po prostu do pionowego lub poziomego wyrównania przedmiotów. Ten post oferował dwie najprostsze metody, które mogą pomóc w wyrównaniu tekstu w pionie w CSS.
Aby to zrobić, dodaj kontener „
Najlepsza witryna edukacyjna !
div >
Pudełko jest formowane za pomocą „ 3px „ granica i „ 250px ' wzrost. „ rozmiar czcionki Właściwość ” jest używana z wartością „ 24px ”, aby czcionka była widoczna. Przypiszemy div „ Wysokość linii ' z ' 250px ” do wyrównania tekstu w pionie do środka. Następnie użyjemy „ wyrównanie tekstu ” właściwość do wyrównania tekstu do środka:
wysokość linii: 250px;
wyrównanie tekstu: środek;
rozmiar czcionki: 24px;
wysokość: 250px;
obramowanie: pełne 3px;
}
Jak widać, tekst został wyrównany w pionie do środka za pomocą line-height i poziomo do środka za pomocą właściwości text-align. Metoda 2: Używanie właściwości display i align-items do wyrównania tekstu w pionie w CSS
wyświetlacz: przewód ;
wyrównaj-elementy: centrum;
uzasadnić-treść: centrum;
rozmiar czcionki: 24px;
wysokość: 200px;
obramowanie: pełne 3px;
}
Podany tekst został pomyślnie wyrównany do środka:
Dostarczyliśmy metody związane z wyrównywaniem tekstu w pionie w CSS. Wniosek