Bonjour, je suis une débutante ici et j'aimerai savoir comment on fait pour centrer l'image avec CSS.

Dans la partie HTML j'ai bien ajouté : class="cupcake" et dans la partie CSS  j'ai mis : .cupcake  { float: center; }

(en colonne) mais l'image reste ou elle était.. 

Bonjour brownskin,

J'ai le même soucis que toi. text-align ne fonctionne pas non plus ...

La seule solution que j'ai trouvé est de mettre les balises <center> </center> dans l'html, mais bien sûr ça n'est pas validé !

EDIT : Je viens de trouver le cours sur openclassroom :

https://openclassrooms.com/courses/centrer-en-css

On peut rentrer dans le CSS :

img {display: block; margin: auto;}

et l'image est centrée. Mais là encore ça n'est pas validé !!!

-
Edité par Amber2610 11 septembre 2017 à 16:48:03

Bonjour

Vous pouvez tenter le code suivant. Désolé si je ne met pas les balises mais ca bug chez moi :-)

IMG.centrer {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="centrer" src="..." alt="...">

Bonjour,

suite aux nombreux sujets ici à ce propos, j'ai testé plusieurs fois, et text-align: center sur la figure fonctionne parfaitement. Attention à ne pas vous compliquer la vie

(pensez également à rechercher avant de poster, vous auriez vu que center n'est pas une valeur valide de float)

suffit de regarder dans quoi se trouve l'image et le texte

Amber2610 a écrit:

Bonjour helpclic,

en effet l'image est centrée mais cette méthode n'est pas validée ...

EDIT : C'est bon j'ai trouvé la version validée ! Il faut mettre un <div class></div> autour de la <figure> :

HTLM :

<div class="cupcake">
      <figure> 
          <img src="cupcake.jpg" alt="Cupcake" />
          <figcaption>Un cupcake</figcaption>
      </figure>

</div>

CSS :

.cupcake
  {
    text-align: center;
  }

-
Edité par Amber2610 hier à 17:09

Merci beaucoup Amber parce que en fait dans le cours ils n'ont précisé nul part qu'il fallait rajouter <div donc c'est pour ca que j'etais perdu.

Parce qu'il n'y a pas à rajouter de div surtout, en gros là ce que tu as fait c'est d'ajouter un ensemble à un ensemble déjà existant.

Alors qu'il suffit pour valider d'utiliser le nom de l'ensemble déjà existant dans le css, et de lui coller la bonne règle.

Pour ma part j'ai testé et ça valide sans aucun soucis.

Et le plus drôle c'est que Lamecarlate a donné la réponse complète dans son post, je rajoute en dessous "suffit de regarder dans quoi se trouve l'image et le texte" et personne ne pense à utiliser <figure> dans le css.

-
Edité par exen 12 septembre 2017 à 22:36:05

bonjour 

il suffit de mettre dans le css

figure

{text-align :center;}

Personnellement rien ne marche pour moi, ça ne valide toujours pas... :/

Pfff j'ai toujours pas pu valider ça.. j'ai essayé avec div , et aussi figure mais en vain ... une solution svp??

Hey les gens : il faut faire simple , il suffit de centrer l'ensemble ! 

body

{

  text-align: center;

}

AlexandreLecorné1 a écrit:

Hey les gens : il faut faire simple , il suffit de centrer l'ensemble ! 

body

{

  text-align: center;

}

Euh. Sortir le bazooka pour ça ? Surtout que body, c'est le site tout entier, donc il faudrait réaligner tout le reste au cas par cas. Remonter le sujet pour dire ça, c'était pas trop la peine…

j'ai essayé et c'est bon de mon côté. 

figure{

text-align:center

}

Amber2610 a écrit:

Bonjour helpclic,

en effet l'image est centrée mais cette méthode n'est pas validée ...

EDIT : C'est bon j'ai trouvé la version validée ! Il faut mettre un <div class></div> autour de la <figure> :

HTLM :

<div class="cupcake">
      <figure> 
          <img src="cupcake.jpg" alt="Cupcake" />
          <figcaption>Un cupcake</figcaption>
      </figure>

</div>

CSS :

.cupcake
  {
    text-align: center;
  }

-
Edité par Amber2610 11 septembre 2017 à 17:09:18

Merci ça fait 2 jour que je galere !! MERCI MERCI MERCI

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération
• Utilisez les boutons pour dire merci

Je ferme ce sujet. 

---

Pas la peine d'indiquer un <div> supplémentaire, applique la class .cupcake sur l'élément <figure>.