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??
1 février 2018 à 18:46:59

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

body

{

  text-align: center;

}

Staff 2 février 2018 à 7:24:10

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…
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
14 février 2018 à 19:48:17

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

figure{

text-align:center

}

26 juin 2018 à 1:01:33

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

Staff 26 juin 2018 à 1:11:56

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 pouce en haut 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>.