Home-theater-designers
Een van de eerste functies waar alle ontwikkelaars over leerden toen ze grip kregen op tekstverwerking, was tekstuitlijning. Dat kleine hulpmiddel is van vitaal belang geweest voor zowel professionele zetters als amateur-flyerontwerpers. Het is geen verrassing dat CSS ondersteuning biedt voor tekstuitlijning als het gaat om webdesign.
De tekst-uitlijnen eigenschap, samen met een of twee andere, bepaalt hoe een element de tekst horizontaal uitlijnt. Naast de basis, implementeren browsers langzaam meer van de specificaties, maar de volledige ondersteuning varieert. Leer hoe u tekst uitlijnt en welke functies de gangbare browsers tegenwoordig ondersteunen.
De basis van de CSS text-align eigenschap
Alignment is een van de meest bekende typografische termen. In het kader van CSS, tekst-uitlijnen verwijst naar horizontale uitlijning.
Horizontale tekstuitlijning is alleen van toepassing op blokcontainers. Dit zijn elementen over de volledige breedte, zoals alinea's en div's. De ... gebruiken tekst-uitlijnen eigenschap op een inline-element zoals in zal geen effect hebben. U kunt ook lijstitems en tabelcellen uitlijnen:
kun je zien wie je abonnees zijn op youtube
In een taal van links naar rechts (hierover later meer), wordt tekst standaard links uitgelijnd:
In CSS is dit hetzelfde als:
p { text-align: left; }Of:
p { text-align: start; }Verwant: Wat zijn Cascading Style Sheets en waarvoor wordt CSS gebruikt?
U kunt andere waarden gebruiken voor de tekst-uitlijnen eigenschap om de horizontale uitlijning te wijzigen. De meest voorkomende waarden zijn bekend uit tekstverwerkingsapps:
text-align: left
text-align: center
text-align: rightRechtvaardiging gebruiken om linker- en rechterranden uit te lijnen
Een andere veel voorkomende waarde voor tekst-uitlijnen is verantwoorden . Browsers voegen ruimte toe aan uitgevulde tekst, zodat elke regel zich uitbreidt om de beschikbare ruimte te vullen:
Wanneer u tekst uitvult, kan de laatste regel lastig zijn. Omdat het erg kort kan zijn (mogelijk slechts een enkel woord), kan het lelijk zijn om het over de gehele breedte te plaatsen. Standaard zal zelfs uitgevulde tekst de laatste regel links uitlijnen.
muis blijft omhoog scrollen als ik naar beneden scrol
Misschien wilt u soms een ander effect. Browserimplementaties halen de specificatie in, maar er zijn twee benaderingen mogelijk.
De alles rechtvaardigen waarde zou moeten betekenen dat browsers de laatste regel behandelen zoals alle andere, en deze over de volledige breedte uitrekken. Op het moment van schrijven ondersteunt geen enkele browser deze waarde. Jij kan check canius om te zien of ze dat doen wanneer u dit artikel leest.
Een andere CSS-eigenschap, tekst-uitlijn-laatste , is flexibeler en heeft een betere ondersteuning. Je kunt het min of meer hetzelfde behandelen als: tekst-uitlijnen , maar het is alleen van toepassing op de laatste regel:
Browserondersteuning voor deze eigenschap is beter, maar niet perfect. Opnieuw, controleer canius voordat je het gebruikt . Als een browser deze eigenschap niet herkent, wordt deze genegeerd.
Tekstuitlijning en leesrichting
Mogelijk werkt u met een taal, zoals Arabisch of Hebreeuws, die van rechts naar links leest. CSS gebruikt de richting eigenschap om dit op te geven, bijvoorbeeld:
direction: rtl;In deze talen wordt tekst meestal standaard rechts uitgelijnd.
In plaats van te moeten specificeren links / Rechtsaf , de voorkeursmanier om tekst uit te lijnen gebruikt de waarden begin en einde . Dit geeft aan of de tekst aan het begin van elke regel of aan het einde moet worden uitgelijnd. In talen van links naar rechts, begin is gelijk aan links . In een taal van rechts naar links begint de tekst rechts en eindigt links.
server ip adres kon niet gevonden worden.
Gebruik makend van begin of einde betekent dat, ongeacht de tekstrichting, de uitlijning consistent is.
Hoe elementen de eigenschap text-align overerven
U moet zich ervan bewust zijn dat de tekst-uitlijnen eigendom erft. Als u het bijvoorbeeld instelt op de lichaam element, is het van toepassing op elk element op de pagina. Je kunt het natuurlijk op elk element overschrijven.
De eigenschap text-align gebruiken om de lay-out te regelen
U kunt de tekst-uitlijnen CSS-eigenschap om te definiëren hoe browsers tekst horizontaal opmaken. De meest voorkomende waarden zijn: links , Rechtsaf , centrum , en verantwoorden . Deze zijn vrij eenvoudig, hoewel verantwoorden brengt enige complexiteit met zich mee.
Gebruik tekstuitlijning spaarzaam. Op billboards en posters kan centrale uitlijning geschikt zijn, maar het kan langere tekstblokken moeilijk leesbaar maken. Rechtvaardiging is meestal beter leesbaar als tekstregels langer zijn. Het uitvullen van korte tekstkolommen kan lelijke spaties creëren.
De tekst-uitlijnen eigenschap is een van de vele CSS-eigenschappen die nuttige opmaak en basispositionering bieden.
Deel Deel Tweeten E-mail 10 eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt lerenHulp nodig met CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webontwikkeling
- Webdesign
- CSS
Bobby is een technologie-enthousiasteling die bijna twee decennia als softwareontwikkelaar heeft gewerkt. Hij is gepassioneerd door gaming, werkt als recensie-editor bij Switch Player Magazine en is ondergedompeld in alle aspecten van online publiceren en webontwikkeling.
Meer van Bobby JackAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren