[Résolu] Flexbox align-self

Bonjour à tous
Dans la capture d'écran ci dessous on a

<div class="row">
    <figure class="diapo">
        <img ...>
        <figcaption>Un simple trou<br>dans le sol</figcaption>
    </figure>
    <figure class="diapo">
        <img ...>
        <figcaption>Entrée</figcaption>
    </figure>
</div>

Le CSS

.row {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
	max-width:100%;
}
.diapo figcaption {align-self:center;border:1px solid red;}

je voudrais que les deux <figcaption> soient alignées par le centre, et non par le haut.
Quelle est l'erreur ?

align-items: center; (sur .diapo figcaption)
ou alors je n'ai pas compris ta question ? Tu parles bien d'aligner le texte, verticalement au centre de la boîte ?

Ce que je veux c'est l'image en haut de la <figure> et le texte centré sur ce qui reste, comme ça :

Ce qu'on dit de faire dans les docs sur le sujet c'est de remplacer
<figcaption>texte</figcaption> par <figcaption<span>texte</span></figcaption> puis de faire

figcaption {
    display:flex;
    flex-direction:column;
    align-content:center;
}

Ce qui me gène, c'est que je ne peux pas demander au propriétaire du site de mettre le <span>, c'est trop technique pour lui.
Si je dois générer le <span> par JavaScript, il faut tenir compte du fait qu'un <figcaption> est une balise de bloc. On peut très bien écrire

<figcaption>
    <h3>titre</h3>
    <p>un texte</p>
    <p> un autre texte</p>
</figcaption>

Mon script devrait donc analyser le contenu de <figcaption> et générer un <span> uniquement dans le cas où il n'y a que du texte, des <br>, des <i>, des <span>, des <img> .... bref tout ce qu'on peut mettre dans un paragraphe. Un peu compliqué à écrire !
Comme il s'agit d'un site sur l'égyptologie, on doit pouvoir mettre des hiéroglyphes sous forme d'images dans le texte
Modifié par PapyJP (05 Oct 2022 - 22:40)

\ô/
ce n'est pas tant sur <figcaption> que je mettrais le flex mais sur <figure>

.diapo {
  display: flex;
  flex-direction: column;
}
.diapo figcaption {
  margin: auto 0;
  border: 1px solid red;
  text-align: center;
}

Oui, c'est déjà le cas
Voici l'état actuel du CSS

.diapo {
	display:flex;
	flex-direction:column;
	border:1px solid;
	border-color:black ;
	border-radius:0.25em;
	padding:0.125em 0.125em 0;
	text-align:center;
}
.diapo img {align-self:flex-start;}
.diapo figcaption {
	align-self:stretch;
	display:flex;
	flex-direction:column;
	align-content: center;
	text-align:center;
	font-size:90%;
	padding:0 0.25em;
        border: 1px solid red; /* pour test */
}

Ce code est destiné à avoir un <figcaption> qui occupe tout le reste de la hauteur de <figure>, avec le contenu centré verticalement. Pour tester, j'ai mis le texte dans des <span>. Ca ne marche pas mieux.

Bingo!

Merci, infiniment de m'avoir sorti de ce bourbier
ça marche mais je n'y comprends rien... un peu d'explication SVP
Modifié par PapyJP (06 Oct 2022 - 18:03)

PapyJP a écrit :
ça marche mais je n'y comprends rien... un peu d'explication SVP

il me semble avoir lu que tu avais l'excellent livre CSS 3 FLEXBOX de qui tu devines, je le laisse donc t'expliquer cela chapitre 4 : Trois astuces utiles -> Center verticalement, en début de page 30.

Effectivement j’ai ce livre en perla ce ouvert sur mon bureau. Je vais me replonger dedans.
Mille mercis !