27547 sujets

CSS et mise en forme, CSS3

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.
Pareil que Stoneteckel, je partirais sur du flex :


display: flex;
justify-content: center;  // Pour centrer horizontalement dans l'élément parent.
align-items: center;  // Pour centrer verticalement dans l'élément parent.
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)
Bon voilà !
A force de bidouiller plein de truc j'ai fini par en trouver un qui marche !
J'ai créé une div autour de mon paragraphe dont je défini pile la hauteur par un calcul et avec les caractéristiques suivantes :
<div style="height: calc(49.7vw - (49.7vw / 700 * 250)); vertical-align: middle; display: table-cell;">
et là ça veut bien !
Si je n'applique pas table-cell à cette div, rien ne se passe.
Je pense que je m'étais aussi fourvoyé en voulant mettre le vertical-align: middle sur le <p>...
Meilleure solution