Een tekst kan overal gemakkelijk worden toegevoegd, maar zonder uitlijning ziet deze er misschien niet representatief en minder aantrekkelijk uit. Niet-uitgelijnde tekst kan ook het hele uiterlijk van een webpagina verstoren. Om dergelijke dingen in webapplicaties aan te pakken, kunnen we enkele handige eigenschappen van CSS gebruiken waarmee u teksten in een mum van tijd kunt uitlijnen.
Dit artikel laat zien hoe u tekst verticaal uitlijnt in CSS.
Hoe tekst verticaal uitlijnen in CSS?
In CSS kunt u de onderstaande eigenschappen gebruiken om tekst verticaal uit te lijnen:
-
- eigenschap regelhoogte
- eigenschappen voor weergeven en uitlijnen van items
Laten we nu elke methode één voor één doornemen!
Methode 1: Eigenschap op regelhoogte gebruiken om tekst verticaal uit te lijnen in CSS
De ' lijnhoogte ” eigenschap specificeert het gebied onder en opwaartse inline-elementen. Het stelt de afstand van een tekst tot andere items in. Met behulp van de regelhoogte-eigenschap kan tekst eenvoudig verticaal naar het midden worden uitgelijnd.
Voorbeeld
Hier is een tekst in een vak (rand) dat zich momenteel in de linkerbovenhoek bevindt. Laten we deze tekst verticaal en horizontaal uitlijnen op het midden:
Laten we nu naar de volgende methode gaan. “ Flexbox ” is een eendimensionale lay-out waarmee u HTML kunt opmaken. U kunt het ook gebruiken om items verticaal of horizontaal uit te lijnen. Laten we dus een voorbeeld nemen en een tekst verticaal uitlijnen met behulp van de flexbox. Voorbeeld Allereerst zullen we onze container flexibel maken door de waarde van de ' Scherm ” eigendom als “ buigen ”. Gebruik vervolgens de ' align-items ” eigenschap voor het verticaal instellen van de inhoud in het midden. Bovendien, om inhoud in het midden horizontaal uit te lijnen, de ' rechtvaardigen-inhoud ” eigenschap zal worden gebruikt: In CSS kan tekst eenvoudig verticaal worden uitgelijnd met behulp van de ' lijnhoogte ' eigendom. U kunt ook gebruikmaken van de ' flexbox “ voor de verticale uitlijning van tekst met “ Scherm ' en ' align-items ' eigendommen. Flexbox is een eendimensionale lay-out en wordt eenvoudig gebruikt voor het verticaal of horizontaal uitlijnen van artikelen. Dit bericht bood twee gemakkelijkste methoden die u kunnen helpen om tekst verticaal uit te lijnen in CSS.
Voeg hiervoor een container toe “
Beste educatieve website !
div >
De doos wordt gevormd met behulp van een ' 3px ' grens en ' 250px ' hoogte. De ' lettertypegrootte ” eigenschap wordt gebruikt met de waarde “ 24px ” om het lettertype zichtbaar te maken. We zullen div een ' lijnhoogte ' van ' 250px ” om de tekst verticaal in het midden uit te lijnen. Vervolgens gebruiken we de ' tekst-uitlijnen ” eigenschap om de tekst in het midden uit te lijnen:
regelhoogte: 250px;
tekst uitlijnen: midden;
lettergrootte: 24px;
hoogte: 250px;
rand: 3px solide;
}
Zoals u kunt zien, is de tekst verticaal uitgelijnd op het midden met regelhoogte en horizontaal op het midden met de eigenschap text-align. Methode 2: Display and align-items Property gebruiken om tekst verticaal uit te lijnen in CSS
Scherm: buigen ;
align-items: midden;
rechtvaardigen-inhoud: centrum;
lettergrootte: 24px;
hoogte: 200px;
rand: 3px solide;
}
De opgegeven tekst is met succes uitgelijnd om te centreren:
We hebben methoden gegeven met betrekking tot het verticaal uitlijnen van tekst in CSS. Conclusie