Partage

Centrer la figure (image) et sa description

dans la partie pratique de la console de code

11 septembre 2017 à 14:47:51

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.. 

11 septembre 2017 à 16:29:25

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

11 septembre 2017 à 16:46:07

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="...">

arf !!!
11 septembre 2017 à 16:50:13

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

Staff 11 septembre 2017 à 18:51:49

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)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 septembre 2017 à 20:22:02

suffit de regarder dans quoi se trouve l'image et le texte
Compos sui.
12 septembre 2017 à 22:04:39

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.

12 septembre 2017 à 22:27:45

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.:o

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

Compos sui.
9 novembre 2017 à 18:12:29

bonjour 

il suffit de mettre dans le css

figure

{text-align :center;}

13 novembre 2017 à 20:15:26

Personnellement rien ne marche pour moi, ça ne valide toujours pas... :/
15 novembre 2017 à 3:48:42

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

Centrer la figure (image) et sa description

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown