In Tailwind CSS zijn vervangen elementen de elementen waarvan de inhoud wordt vervangen door een externe bron, zoals afbeeldingen en video's. Soms staan gebruikers voor een uitdaging om een vervangen element in de container te plaatsen. Dit komt omdat deze elementen de container kunnen overstromen als hun maat groter is dan de beschikbare ruimte. Tailwind CSS biedt hulpprogrammaklassen om te bepalen hoe de inhoud van een vervangen element wordt gepositioneerd en uitgelijnd binnen de container.
Dit artikel illustreert de methode om vervangen elementen binnen een container in Tailwind CSS te plaatsen.
Hoe vervang ik elementen binnen een container in Tailwind?
Om vervangen elementen binnen een container in Tailwind te positioneren, maakt u een HTML-programma en gebruikt u de object-
Syntaxis
< element klas = 'object-
Voorbeeld
In dit voorbeeld maken we een container en gebruiken we alle ' object- ” (afbeelding) elementen om hun vervangen positie binnen de container te specificeren:
< lichaam >
< div klas = 'bg-sky-300 grid grid-rijen-3 grid-flow-col m-5 spatie-y-4 p-4 rechtvaardigen-tussen' >
< img klas = 'object-geen object-links-boven w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-links w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-links-onder w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-centrum w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-bodem w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-rechts-boven w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-rechts w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klas = 'object-geen object-rechts-onder w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
lichaam >
Hier, in het bovenliggende
- “ bg-sky-300 ” class stelt de achtergrondkleur van de container in op sky.
- “ rooster ” class maakt een rasterlay-out mogelijk.
- “ raster-rijen-3 ” class stelt het rijnummer in het raster in op 3.
- “ grid-flow-col ” klasse definieert de stroom van rasteritems in kolommen.
- “ m-5 ” klasse voegt 5 eenheden marge toe rond de container.
- “ spatie-y-4 ” klasse voegt een verticale afstand toe van 4 eenheden tussen de onderliggende
elementen binnen de container.
- “ p-4 ” klasse voegt 4 eenheden opvulling toe aan de inhoud in de container.
- “ rechtvaardigen-tussen ” klasse lijnt de onderliggende elementen binnen de container uit en verdeelt ze gelijkmatig.
In de
elementen:
- “ object-geen ” klasse past geen enkele positie toe op het element en geeft het element weer op de standaardpositie in de container.
- “ object-links-boven ” klasse plaatst het
element in de linkerbovenhoek van de container.
- “ object-links ” klasse lijnt het element uit met de linkerrand van de container en houdt het verticaal gecentreerd.
- “ object-links-onder ” klasse plaatst het
element in de linkerbenedenhoek van de container.
- “ object-top ” klasse plaatst het element aan de bovenrand van de container en plaatst het horizontaal gecentreerd.
- “ object-centrum ” klasse plaatst het element in het midden van de container en houdt het horizontaal en verticaal gecentreerd.
- “ object-bodem ” klasse plaatst het element aan de onderkant van de container en houdt het horizontaal gecentreerd.
- “ object-rechts-boven ” klasse plaatst het
element in de rechterbovenhoek van de container.
- “ objectrecht ” class plaatst het element aan de rechterrand van de container en houdt het verticaal gecentreerd.
- “ object-rechts-onder ” class plaatst het element in de rechterbenedenhoek van de container.
Uitgang
Op de bovenstaande webpagina is te zien dat alle inhoud van het vervangen element met succes is gepositioneerd.
Conclusie
Om vervangen elementen binnen een container in Tailwind te positioneren, gebruikt u de ' object-
” hulpprogramma's worden gebruikt met de gewenste elementen, zoals afbeeldingen. Gebruikers moeten de specifieke positie of zijde definiëren, d.w.z. links, rechts of in het midden in het hulpprogramma 'object- ' om de vervangen elementen te positioneren. Dit artikel heeft de methode geïllustreerd om vervangen elementen in een container in Tailwind CSS te plaatsen.