Texte à côté d'une image déjà stylisée - HTML / CSS Fermé

Question

Bonjour, pour un devoir pour fac je crée un site web. Dans l'une des pages du site, j'ai trois images toutes en rondes, avec un ombrage derrière et quand on clique dessus cela renvoie à un autre site. Du coup, le code html ressemble à ceci :

Et voici le code CSS: .images2 { background-size : contain; background-position : 50% 50%; background-image : url(musee.jpg); display : inline-block; width : 300px; height : 300px; border: none; -moz-border-radius : 200px; -webkit-border-radius : 200px; border-radius : 200px; box-shadow: 10px -20px; color: rgb(203, 203, 245); margin-top: 40px; } #img1 :hover{ -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari 3-8 */ transform: scale(1.5); } Le problème est que je n'arrive pas à placer du texte à côté de l'image. J'ai essayé plusieurs codes, mais le texte ne se place jamais au milieu à côté, soit il s'affiche en bas soit à droite mais tout en bas de l'image. Est-ce que quelqu'un sais comment je peux faire pour placer mon texte à côté ? (sans devoir modifier l'apparence de l'image) svp ? :))

Pitet · Answer

Bonjour,

Essaye d'appliquer un vertical-align: middle; sur .image2.

La div id="img1" est mal fermée (le </div> doit être placé avant le </a> en suivant l'ordre des balises) et celle-ci semble inutile : ton hover pourrait être appliqué sur la classe .image2 : https://jsfiddle.net/63ogrLwt/

Notification · Answer

Bonjour, j'ai supprimé toutes les balises

et n'ai laissé que le class="images2" et ça fonctionne ! Pour que le texte ne soit plus sous forme de lien j'ai mit le texte après la balise Voici donc le code fini : HTML :

Visitez les lieux incontournables de Roubaix !

Faites le tour des endroits mythiques de la ville ! Depuis le Musée de la piscine jusqu'à l'ancienne Usine de Roubaix, découvrez la région sous un autre angle. CSS : .images2 { background-size : contain; background-position : 50% 50%; background-image : url(musee.jpg); display : inline-block; width : 300px; height : 300px; border: none; -moz-border-radius : 200px; -webkit-border-radius : 200px; border-radius : 200px; box-shadow: 10px -20px; color: rgb(203, 203, 245); margin-top: 40px; margin-right: 10px; margin-left: 10px; vertical-align: middle; } .images2:hover { transform: scale(1.5); } Cela rend comme le lien que vous avez mit dans votre commentaire sans que le texte soit un lien. Je réitère le code une dernière fois au cas où quelqu'un en aurait besoin à l'avenir. Je vous remercie beaucoup de votre aide, ça m'a débloqué je vais pouvoir finir le site facilement maintenant ! :) Bonne journée, et merci encore !

Texte à côté d'une image déjà stylisée - HTML / CSS

2 réponses

Discussions similaires