Dans Tailwind CSS, les éléments remplacés sont les éléments dont le contenu est remplacé par une ressource externe, telle que des images et des vidéos. Parfois, les utilisateurs sont confrontés à un défi pour positionner un élément remplacé dans le conteneur. En effet, ces éléments peuvent déborder du conteneur si leur taille est supérieure à l'espace disponible. Tailwind CSS fournit des classes utilitaires pour contrôler la façon dont le contenu d'un élément remplacé est positionné et aligné dans le conteneur.
Cet article illustrera la méthode pour positionner les éléments remplacés dans un conteneur dans Tailwind CSS.
Comment positionner les éléments remplacés dans un conteneur dans Tailwind ?
Pour positionner les éléments remplacés dans un conteneur dans Tailwind, créez un programme HTML et utilisez le ' objet-
Syntaxe
< élément classe = 'objet-
Exemple
Dans cet exemple, nous allons créer un conteneur et utiliser tous les ' objet-
< corps >
< div classe = 'grille bg-sky-300 grille-lignes-3 grille-flux-col m-5 espace-y-4 p-4 justifier-entre' >
< image classe = 'objet-aucun objet-gauche-haut w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-gauche w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-gauche-bas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-centre w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-bas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-droit-haut w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-droit w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< image classe = 'objet-aucun objet-droite-bas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
corps >
Ici, dans l'élément parent
- ' bg-sky-300 ” La classe définit la couleur d'arrière-plan du conteneur sur ciel.
- ' grille ” La classe permet une disposition en grille.
- ' grille-lignes-3 ” La classe définit le nombre de lignes dans la grille sur 3.
- ' grille-flux-col ” définit le flux des éléments de la grille dans les colonnes.
- ' m-5 ” classe ajoute 5 unités de marge autour du conteneur.
- ' space-y-4 ” ajoute un espacement vertical de 4 unités entre les éléments enfants
dans le conteneur.
- ' p-4 ” ajoute 4 unités de rembourrage au contenu à l'intérieur du conteneur.
- ' justifier-entre ” classe aligne les éléments enfants dans le conteneur et les répartit uniformément.
Dans les éléments
:
- ' objet-aucun ” la classe n'applique aucune position à l'élément et affiche l'élément à sa position par défaut dans le conteneur.
- ' objet-gauche-haut ” La classe positionne l'élément
dans le coin supérieur gauche de son conteneur.
- ' objet-gauche ” aligne l'élément sur le bord gauche du conteneur et le maintient centré verticalement.
- ' objet en bas à gauche ” La classe positionne l'élément
dans le coin inférieur gauche de son conteneur.
- ' haut de l'objet ” positionne l'élément sur le bord supérieur de son conteneur et le centre horizontalement.
- ' centre de l'objet ” positionne l'élément au centre du conteneur et le maintient centré horizontalement et verticalement.
- ' fond d'objet ” positionne l'élément sur le bord inférieur de son conteneur et le maintient centré horizontalement.
- ' objet en haut à droite ” La classe positionne l'élément
dans le coin supérieur droit du conteneur.
- ' droit de l'objet ” positionne l'élément sur le bord droit de son conteneur et le maintient centré verticalement.
- ' objet en bas à droite ” La classe positionne l'élément dans le coin inférieur droit de son conteneur.
Sortir
Dans la page Web ci-dessus, on peut observer que tout le contenu de l'élément remplacé a été positionné avec succès.
Conclusion
Pour positionner les éléments remplacés dans un conteneur dans Tailwind, le ' objet-
” les utilitaires sont utilisés avec les éléments souhaités, tels que les images. Les utilisateurs doivent définir la position ou le côté spécifique, c'est-à-dire gauche, droite ou centre dans l'utilitaire 'object- ' pour positionner les éléments remplacés. Cet article a illustré la méthode pour positionner les éléments remplacés dans un conteneur dans Tailwind CSS.