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

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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

8 novembre 2017 à 21:20:36

Merci à vous, je déterre également le problème, je m'en vais essayer de couper chrome et de redémarrer :)
12 mars 2018 à 16:38:25

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

Staff 12 mars 2018 à 19:28:46

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

Déterrage

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

Seul on va plus vite ... Ensemble on va plus loin ! A maîtriser : Conception BDDMySQL, HTML/CSS, PHP/MySQL