Mettre un texte sur des images

Taijin -  
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:

3 réponses

  1. yikorec
    Pose la méme question ici https://www.developpez.com/
    -1
    1. Pierrecastor Modérateur
      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 <>
      0
      1. Taijin Auteur 
        <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);
}
        0
    2. Pitet
      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,
      0