Partage

Centrer la figure ( image) et sa description

Sujet résolu
19 décembre 2016 à 16:36:15

Bonjour

Je rencontre un problème avec un exercice dans le tuto "Apprenez à créer votre site web avec HTML5 et CSS3" qui est celui des cupcakes. Il est demandé à un moment deCentrer la figure (image) et sa description et j'ai beau cherché mais j'y arrive pas.

Je vous met un screen pour que vous puissiez vous faire une idée. Merci pour votre aide

19 décembre 2016 à 17:55:33

Bonjour,

Une manière simple est d'utiliser la propriété margin:auto, mais il faut alors spécifier une largeur à l'élément concerné (ce sera la largeur de l'image, mettons 300px) ; il faut également centrer la légende (=figcaption) sous la photo, donc :

	<style>
	figure {
		width:300px;
		margin:auto;	
	}
	figcaption {
		text-align:center;
	}
	</style>



19 décembre 2016 à 17:59:00

Salut !

Pourquoi ne pas attribuer un 

text-align: center;

à ton <figure> ?

Bon courage !

19 décembre 2016 à 18:22:00

Rys_Navlys, le résultat est bon,
mais la question est ambigüe : on demande de centrer l'élément "figure" dans la page (ma solution) ou bien l'image dans l'élément figure ta solution) ?

That is the question... 

19 décembre 2016 à 18:25:24

Tout dépend du rendu que tu veux. Entraîne toi à faire les deux !

Centrer l'élément figure implique qu'il ne fasse pas toute la largeur de la page, par exemple pour adapter du texte autour. Sinon par défaut, l'élément figure fait toute la largeur de la page, donc tu peux aligner son contenu à l'intérieur. Dans ton cas, inutile de donner une largeur à figure a priori.

20 décembre 2016 à 9:01:32

Alors,

Tip top les deux solutions fonctionnent à merveilles :), la deuxième solution était celle demandée (centrer le texte à l'image).

Merci pour aide^^

21 décembre 2016 à 18:24:59

Merci text-align marche pour moi
1 mars 2017 à 0:25:18

figure
{
   text-align: center;
}
ca marche
5 mai 2017 à 11:48:47

ou bien ajouter "class" à la figure:

<figure class="image">

ensuite centrer la figure :

.image

       {

          text-align: center;

        }

-
Edité par azizha1 5 mai 2017 à 11:49:33

29 mai 2017 à 15:20:21

Merci ça me sert aussi ce post;-)
4 septembre 2017 à 9:12:17

Salut je déterre le sujet car rien ne fonctionne à la vérification pour ma part.

J'ai bel et bien testé et ça ne fonctionne pas :

figure
   {
   text-align: center;
   }

Et aussi :

figure img
    {
    display: block;
    margin: auto;
    }

figure figcaption
    {
    text-align: center;
    }

 Ou encore :

.image
    {
    text-align: center;   
    }



Le résultat a l'écran est le même mais aucunes des solutions ci-dessus ne fonctionnent :/


-
Edité par SébastienFAUCHER 4 septembre 2017 à 9:18:06

5 septembre 2017 à 7:06:23

Bonjour Sébastien,

Je pense que tu travailles avec IE. Tout comme toi, j'ai bogué quelques heures avec ce même code. Pour l'exercice, prend un autre navigateur, comme Mozilla, et tu verras que ça passe tout seul.

Il sera temps de répondre plus tard à la question de savoir pourquoi ça bogue sous IE11 ?!

5 septembre 2017 à 12:23:40

Non j'utilise Mozilla Firefox et j'utilise la dernière version Ubuntu 13.04 il me semble,  je vais essayer avec chrome. Je suis persuadé de ne pas m'être trompé..

[Problème résolu]

Ps: Au démarrage de linux je l'ai refait en 5 min tout est ok

-
Edité par SébastienFAUCHER 5 septembre 2017 à 13:24:11

12 octobre 2017 à 21:40:30

Bon me concernant j 'ai tout essayé les solutions ci dessus, je suis sur chrome ( a jour) et rien n'y fait. Ca en est désespérant ....

-
Edité par olivierguilhot1 12 octobre 2017 à 21:41:06

14 octobre 2017 à 14:19:07

En fait j'étais moi même bloqué a cette étape, c'est un bug de la moulinette, j'ai changé de navigateur et ça a fonctionné avec le même code.

-
Edité par SébastienFAUCHER 14 octobre 2017 à 14:20:01

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