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

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>

Salut !

Pourquoi ne pas attribuer un 

text-align: center;

à ton <figure> ?

Bon courage !

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

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.

Alors,

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

Merci pour aide^^

Merci text-align marche pour moi

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

Merci ça me sert aussi ce post;-)

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

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 ?!

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

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 ol.guilhot 12 octobre 2017 à 21:41:06

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

Merci à vous, je déterre également le problème, je m'en vais essayer de couper chrome et de redémarrer

Merci bcp.. et enfin !!

Salut a tous! =D

bien que déjà résolut !

L'emplois de la balise <div></div> a fonctionné pour moi avec :

-------------------------------------------------------------------------

div{
  text-align: center;
}

-------------------------------------------------------------------------

-
Edité par AfrohDix-Yack's 12 mars 2018 à 16:39:58

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention plus facilement.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

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

Avant de poster, demandez-vous si ce que vous allez dire apporte quelque chose au sujet. Si votre message n'apporte rien, vous ferez perdre du temps à tout le monde et le sujet pourrait dévier ou devenir difficile à suivre.

Aussi, vérifiez la date du topic. Le déterrage de topic nuit au bon fonctionnement du forum et est interdit. Utilisez les boutons pour dire merci. Si le topic date de plus de deux mois sans réponses, mieux vaut ne pas répondre. Si vous avez une question similaire, créez plutôt votre propre sujet en détaillant votre contexte

Je ferme ce topic.