Javascript Center-tekst

Michael Zippo

In deze CSS-zelfstudie laten we zien hoe u tekst centreert en elementen vergrendelt. Er zijn verschillende tips die u kunt gebruiken om elementen horizontaal en verticaal in een lay-out te centreren.

Om uitgelijnde tekst in een groter element te centreren, gebruikt u text-align:center; zoals hieronder weergegeven :

Ik ben a div

En alle tekst wordt gecentreerd door text-align: center

Uitlijning centraal blokelementen:

Het centreren van blokelementen wordt het best geïllustreerd met de -tag van een HTML-document. Wat u moet doen, is de totale breedte van de container controleren en vervolgens de marge instellen op auto:

Ik ben een div

En alle tekst wordt gecentreerd door text-align: centre

Lijn de afbeelding uit met het midden:

Als u een afbeelding wilt centreren, wijzigt u in de CSS-selector de massaweergave en bestuurt u vervolgens de breedte van het afbeeldingselement, met behulp van % of px. Stel marge in op auto:

Om de onderliggende afbeelding te centreren, wijzigt u de weergave in block en stelt u de marges in op auto, controleert u de breedte met px of%

Verticaal en horizontaal centreren in een div:

opvulling:

Om verticaal te centreren in een aan te passen - u kunt vervolgens text-align: center gebruiken om de alinea horizontaal te centreren: < br >

Om de onderliggende afbeelding te centreren, wijzigt u de weergave in block en stelt u de marges in op auto, controleert u de breedte met px of%

regelhoogte:

Je kunt de regelhoogte ook instellen op de hoogte van het blokelement dat je centreert met de tekst -align:center om het element uit te lijnen met het midden. Als je meerdere regels hebt, gebruik dan regelhoogte op ouder en kind en voeg vertical-align: middle en display: inline-block toe aan het kind: < br>

transform:

Een andere manier om elementen te centreren is door positie en transformatie te gebruiken. Plaats de ouder in positie: relatief, het kind in absolute positie. Het onderliggende element moet bovenaan en links op 50% worden geplaatst, daarna gebruiken we de eigenschap transform om de tekst in de div aan te passen. We zullen in een ander artikel meer over deze eigenschap vertellen, dus het is niet erg als het op dit moment niet 100% duidelijk is:

flexbox:

Ten slotte kunnen we de elementen centreren met behulp van flexbox. Weergave instellen: buig naar het bovenliggende element van de onderliggende elementen die u wilt centreren, gebruik vervolgens align-items en required-content om het te centreren:

Dit zijn de meest voorkomende manieren om het centreringsprobleem van elementen in Layout op te lossen.