Figure figcaption
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour, j ai un problème de figure-figcaption. j aimerais mettre ma figcaption sous et zu centre de mon image.
figure {
border: 3PX solid violet;
margin: 0;
img.scaled {
width: 10%;
}
}
merci ^^.
- Figure figcaption
- Légende figure word - Guide
- Problème numérotation figure word ✓ - Forum Word
- Figure de hip hop ✓ - Forum Loisirs / Divertissements
- Numérotation légende word 2010 ✓ - Forum Word
- Table de figure google doc ✓ - Forum Word
2 réponses
Bonjour,
<figure>
<img src='http://placehold.it/200x200' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>
</figure>
figure {
display: inline-block;
border: 1px dotted gray;
margin: 20px; /* adjust as needed */
}
figure img {
vertical-align: top;
}
figure figcaption {
border: 1px dotted blue;
text-align: center;
}
Salut, une capture d'écran n'indique rien de votre problème. Il manque une partie du code dont le HTML.
Voici un exemple pour vous inspirer,
https://developer.mozilla.org/fr/docs/Web/HTML/Element/figcaption
le principe est que pour centrer vous devez le faire avec CSS. Un simple text-align: center; sur le texte devrais suffire je pense, dans l'exemple ils utilisent le s marges ce qui est très simple aussi.
Regardez aussi la différence de mise en page des éléments de type inline et block qui indiquent si les éléments seront affichés en lignes ou en blocs consécutifs.
Enfin c'est très basique tout ça, comme si vous débutiez ou n'avez aucune idée de la mise en en page sur le web. Si c'est le cas commencez par faire quelques exercices CSS (et éventuellement HTML si ça reste flou pour vous)pour vous familiariser avec la mise en page. Le positionnement dans le flux du document sont une partie importante des bases.
j'avais déjà essayé ça. mais dés lors que l'on baisse la width de l'image a 30%,la bordure ne bouge pas
Sans voir le code html et css COMPELT que tu as essayé ... IMPOSSIBLE de te venir en aide !