Mettre un texte sur des images
Taijin
Messages postés
55
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour à tous, je m'adresse à vous car je codais en HTML et CSS afin de créer une ligne de 4 images contenant un texte chacune. J'avais réussi a avoir ma ligne cependant lorsque j'ai voulu rajouter du texte tout s'est mis en colonne
Comment puis-je faire?
Merci par avance
Mon code HTML:
Mon code CSS:
Comment puis-je faire?
Merci par avance
Mon code HTML:
Mon code CSS:
3 réponses
-
Salut,
Ca sera bien plus pratique si tu colle ton code dans les balises code html et css du forum.
Clique sur la flèche du bas à droite de la petite icône <>
-
<div class="images"> <div class="img1"> <p> Samsung </p> <img src="Photo/samsung.jpg"> </div> <div class="img2"> <p> Samsung </p> <img src="Photo/samsung.jpg"> </div> <div class="img3"> <p> Samsung </p> <img src="Photo/samsung.jpg"> </div> <div class="img4"> <p> Samsung </p> <img src="Photo/samsung.jpg"> </div> </div>
.images { width: 90%; margin-right: auto; margin-left: auto; text-align: center; vertical-align: middle; } .images img { border: solid grey; width: 22%; margin-left: 2%; margin-top: auto; margin-bottom: auto; border-radius: 10px; transition: all 0.3s ease-out; z-index: 2; } .images img:hover { border: solid red; border-radius: 13px; transform: scale(1.1); z-index: 9; box-shadow: 7px 7px 2px 1px rgba(0, 0, 255, .2); }
-
-
Bonjour,
Tu peux appliquer la règles css display: flex; sur ton conteneur .images pour aligner les div enfants horizontalement.
Dans ton cas, préfères l'utilisation de la balise html span à la place de la balise p. La balise p possède par défaut des marges css et d'un point de vue sémantique elle doit être utilisée pour des paragraphes.
Exemple : https://jsfiddle.net/7v80cd6y/
Plus d'infos sur flexbox : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Flexbox
Bonne journée, -
