[Résolu] Petit problème de mise en page en mode table

Bonjour

Je cherche à avoir cette mise en page :

+-------+------+
I       I      I
I       I text I
I img1  I      I
I       +------+
I       I img2 I
+-------+------+

et le problème rencontré est que je n'arrive pas centrer verticalement le 'text'. Un

vertical-align: middle

sur le <p> n'y fait rien. (Et je veux que img2 soit alignée sur le bas.)
HTML:

	<div style="position: relative; overflow-x: hidden; margin: 0 0 15vw 0;">
	<div class="figs">
	<figure>
	<img src="img1.jpg" alt="" 
			style="border-radius: 10px;" class="maxheight" 
			sizes="49.7vw" srcset="img1-320.jpg 320w, img1.jpg 640w">
	</figure>
	<figure style="vertical-align: bottom;">
	<p class="textesurimage textesurimageD" style="text-align: center; width: 100%;">
	Patati patata blabla sur plusieurs lignes
	</p>
	<img src="img2.jpg" alt="" 
		sizes="49.7vw" 
		srcset="img2-320.jpg 320w, img2.jpg 640w">
	</figure>
	</div>
	</div>

CSS:

	.figs { display: table; border-spacing: .2vw 0; }
	figure { position: relative; display: table-cell; }
	figure img { width: 49.7vw; }

.maxheight { height: auto; max-height: 100vh; object-fit: cover; }
.textesurimage { 
	transform: translateX(-100%); 
	overflow: hidden; 
	width: 50%; 
	bottom: 0; 
	left: 5vw; 
	text-align: left; 
	font-size: 2.5em; 
	text-shadow: 1px 1px 1px #000; 
	}
.textesurimageD { transform: translateX(100%); }
	@media screen and (max-width:1200px) { .textesurimage{font-size: 1.75em;line-height: 1.125em;} }
.animtext { transform: translateX(0); transition: transform 1s ease; }

@media screen and (max-width:567px) {
	.figs { display: inline; margin:0; padding:0; }
	figure { display: inline; margin:0; padding:0; }
	figure img { width: 100%; }
}

(Bon j'ai tout mis au cas où mais c'est, je pense, les 3 premières lignes du CCS qui importent.)

Qqun aurait une idée ?

PS: j'ai essayé de faire un codepen mais les images externes ne veulent pas s'afficher.
Modifié par kerlutinoec (31 May 2021 - 10:46)

Ah oui aussi, je trouve bizarre que, dès que j'enlève le

style="vertical-align: bottom;"

de la deuxième <figure>, la partie droite déborde au delà du bas de la partie gauche.

Salut! J'aurais tendance à te conseiller de partir sur du flex, ce serait facilement réalisable.

.container{ // La div principale qui va contenir les autres
  display: flex;
  justify-content: space-around;
}

.image{ // Pas besoin de l'englober dans une div
  
}

.container-text-image2{ // La div qui va contenir ton texte et ton image 2
  display: flex;
  flex-direction: column;
}

.text{ 
  text-align: center;
}

.image2{
  // Tes propriétés pour l'image2
}

Ça donnerai quelque chose comme ça.
Va voir cette page https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Il y a tout ce que tu as besoin de savoir, ça va te faire gagner un temps fou.

Merci pour vos suggestions.
J'aimerais dans un premier temps essayer de conserver le CSS actuel qui me sert déjà ailleurs pour un double colonnes responsive.
Et comprendre pourquoi un

vertical-align:middle

ne fonctionne pas.

Je me suis rendu compte en colorant le fond du <p> qu'il ne prend pas toute la hauteur résiduelle. Aussi ai-je forcer une hauteur calculer avec

height: calc(49.7vw - (49.7vw / 700 * 250))

pour que mon <p> occupe bien tout l'espace résiduel. Le <p> prend bien alors la hauteur restante (je le vois avec le fond coloré).
Et bien malgré cela un

vertical-align:middle

ne centre toujours pas le texte verticalement dans le <p> réhaussé.

Quelqu'un saurait pourquoi ?
Modifié par kerlutinoec (31 May 2021 - 15:14)