Jak zarovnat text vertikálně v CSS

Text lze snadno přidat kamkoli, ale bez zarovnání může vypadat nereprezentativně a méně atraktivní. Nezarovnaný text může také narušit celkový vzhled webové stránky. K řešení takových věcí ve webových aplikacích můžeme použít některé užitečné vlastnosti CSS, které vám pomohou zarovnat texty během okamžiku.

Tento článek ukáže, jak zarovnat text svisle v CSS.

Jak zarovnat text vertikálně v CSS?

V CSS můžete k vertikálnímu zarovnání textu použít následující vlastnosti:

- vlastnost line-height
- vlastnosti display a align-items

Nyní si projdeme každou metodu jednu po druhé!

Metoda 1: Použití vlastnosti výšky řádku k vertikálnímu zarovnání textu v CSS

' výška čáry Vlastnost ” určuje oblast pod a nahoru vkládanými prvky. Nastavuje vzdálenost textu od ostatních položek. Pomocí vlastnosti line-height lze text snadno zarovnat svisle na střed.

Příklad

Zde je text uvnitř rámečku (ohraničení), který se aktuálně nachází vlevo nahoře. Zarovnejme tento text na střed svisle a vodorovně:

Chcete-li to provést, přidejte kontejner „

” ve značce souboru HTML a zadejte v něm požadovaný text:

< div >
Nejlepší vzdělávací web !
div >

Krabice je vytvořena pomocí „ 3px 'hranice a' 250 pixelů 'výška. ' velikost písma 'vlastnost se používá s hodnotou' 24 pixelů “, aby bylo písmo viditelné. Přiřadíme div a “ výška čáry “ z “ 250 pixelů ” pro svislé zarovnání textu na střed. Dále použijeme „ zarovnání textu ” vlastnost pro zarovnání textu na střed:

div {
line-height: 250px;
text-align: center;
velikost písma: 24px;
výška: 250px;
ohraničení: 3px plné;
}

Jak vidíte, text byl zarovnán svisle na střed pomocí výšky řádku a vodorovně na střed pomocí vlastnosti text-align.

Nyní přejdeme k další metodě.

Metoda 2: Použití vlastnosti display and align-items k vertikálnímu zarovnání textu v CSS

“ Flexbox ” je jednorozměrné rozvržení, které umožňuje formátovat HTML. Můžete jej také použít k zarovnání položek svisle nebo vodorovně.

Vezměme si tedy příklad a zarovnejme text svisle pomocí flexboxu.

Příklad

Nejprve učiníme náš kontejner flexibilní nastavením hodnoty „ Zobrazit 'vlastnost jako' flex “. Dále použijte „ zarovnat-položky ” vlastnost pro vertikální nastavení obsahu uprostřed. Chcete-li navíc zarovnat obsah vodorovně na střed, „ ospravedlnit-obsah ” vlastnost bude použita:

div {
Zobrazit: flex ;
align-items: center;
justify-content: center;
velikost písma: 24px;
výška: 200px;
ohraničení: 3px plné;
}

Zadaný text byl úspěšně zarovnán na střed:

Poskytli jsme metody související s vertikálním zarovnáním textu v CSS.

Závěr

V CSS lze text snadno zarovnat vertikálně pomocí „ výška čáry ' vlastnictví. Můžete také využít „ flexbox ' pro svislé zarovnání textu s ' Zobrazit ' a ' zarovnat-položky vlastnosti. Flexbox je jednorozměrné rozložení a jednoduše se používá pro vertikální nebo horizontální zarovnání položek. Tento příspěvek nabídl dvě nejjednodušší metody, které vám mohou pomoci svisle zarovnat text v CSS.

Jak zarovnat text vertikálně v CSS