Bonjour à tous

Je voudrais que mon texte (div legpe) s'inscrive sur l'image en bottom-left.
Or l'image est responsive et est centrée et sa largeur n'est donc pas forcément la même que le div qui la contient (div imgpe).
Mon problème est que le texte s'aligne à gauche sur le div.

J'ai beaucoup cherché sur la toile sans trouver.
Merci de vos lumières.

Je vous joins mon code html et css
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="cadrepe">
 
	<div class="parentevt">
 
		<div id="imgpe">
 
				<img id="img_pleine" src="images/grande.jpg">
 
				<div id="legpe">
					Texte de la légende: Le problème est que ce texte ne commence pas sur le bord gauche de l'image mais sur le bord gauche du cadre div imgpe. Or l'image étant responsive, je ne sais pas comment faire.
				</div>
 
		</div>
	</div>
</div>
et le css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#cadrepe {
	position: fixed;
	top:0;
	left:0;
	margin: auto;
	height: 100%;
	width: 100%; 
	display: flex;
}
.parentevt {
	width: 88%;
	height: 88%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
#imgpe {
	position: relative;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
}
#img_pleine {
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
	margin: auto;
}
#legpe {
	position: absolute;
	bottom: 8px;
}