[Résolu] Débuts avec Figure et Caption

Bonjour.

Je débute dans le balisage avec Figure et Caption et je m'arrache les cheveux. Je cherche à obtenir cette mise en forme :

https://images2.imgbox.com/7c/d1/zblHpUEV_o.jpg

Pour le moment, avec ceci :

img.perso_06 {
	background-color: #FEFEFE;
	border-top: 30px solid #000000;
	border-right: 30px solid #000000;
	border-bottom: 60px solid #000000;
	border-left: 30px solid #000000;
	box-shadow: 5px 5px 10px #555555;	
	margin: 5px;
	padding: 2px;
}

p.text_title {
	color: #FEFEFE;
	margin: -48px 0 40px 0;
	text-align: center;
}

<img src="photos/test.jpg" height="600" width="900" class="perso_06" alt="Photo" />
<p class="text_title">Une ambiance des plus pesantes.</p>

Mais c'est du bricolage et j'ai donc essayé avec Figure et Caption. Je n'arrive pas à intégrer le liseré correctement et mon texte reste désespérément collé en dessous de la photo alors que je voudrais qu'il soit centré verticalement. J'aurais donc besoin d'un petit coup de main.

Merci.

Bonjour Nerva,
Un exemple :
https://codepen.io/Zonecss/pen/VVMvqx

Eh bien merci...
Modifié par Nerva (30 Nov 2018 - 11:56)

J'avais marqué le sujet comme résolu mais je vois après coup qu'il y a un truc qui ne va pas. Je suis arrivé à ça :

figure { 
	background-color: #000000;
	box-shadow: 5px 5px 10px #555555;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	text-align: center;
}

figure img {
	border: 2px solid #FFFFFF;
	vertical-align: top;
}

figure figcaption {
	color: #FFFFFF;
	display: block;
	font-family: sans-serif;
	font-size: 14px;
	margin-top: 30px;
}

<figure>
  <img src="test.jpg" height="720" width="960" alt="Photo" />
  <figcaption>Bla bla bla</figcaption>
</figure>

Problème : malgré les margin-left et margin-right en auto, la photo n'est pas centrée horizontalement.
Modifié par Nerva (30 Nov 2018 - 11:58)

Pour que margin-left et margin-right en auto alignent au centre il faut que l'objet soit en display block. En fait une marge auto vaut 0 pour les éléments flottants, en ligne ou en position absolue/fixe.

Pour centrer un élément en ligne (comme inline-block), il suffit de definir text-align: center sur son parent.