I want to put a text (the subtitle-text) inside the image which has an alignment center. This needs to be centered even if it is being minimized or maximized. I tried to use transform and put left and top: 50% but it doesn't work and keeps overflowing in the screen (outside the image). can someone help me? I tried everything that is on the net and also used a sample from this platform but it doesn't work.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.title {
position: absolute;
text-align: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 1rem;
font-family: b;
}
.fa {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.fa img {
width: 30%;
height: 1.5rem;
display: block;
margin: 0 auto;
}
.subtitle {
position: relative;
display: flex;
margin: 0.5rem;
text-align: center;
align-items: center;
}
.subtitle img {
width: 23%;
}
.subtitle .subtitle-text{
position: absolute;
text-align: center;
justify-content: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 0.8rem;
font-family: b;
left: 4%;
}
.main {
padding: 1rem 0;
overflow-x: hidden;
}
.main .box{
width: 100%;
margin: 0 auto;
text-align: center;
color: #292B32;
margin-right: 1.5rem;
font-size: 0.65rem;
font-weight: 400;
font-family: b;
}
</style>
</head>
<body>
<div class="main">
<div class="fa">
<div class="title">title</div>
<img src="https://www.researchgate.net/profile/Maximus-Tamur/publication/354575794/figure/fig2/AS:1067950245154821@1631630588806/Rectangle-b-Cut-out-the-existing-rectangular-shape-through-one-of-the-diagonal-lines-c.png" alt="" />
</div>
<div class="cont">
<div class="subtitle">
<div class="subtitle-text">subtext</div>
<img src="https://www.researchgate.net/profile/Maximus-Tamur/publication/354575794/figure/fig2/AS:1067950245154821@1631630588806/Rectangle-b-Cut-out-the-existing-rectangular-shape-through-one-of-the-diagonal-lines-c.png" alt="" />
</div>
</div>
</div>
</body>
</html>
You may center the subtitle text by modifying the CSS for the .subtitle-text class. You set the left attribute to 4% which is pushing the text to the right by 4%, Instead of using left:4%, you can use left:11% and add bottom:10%; and transform: translateX(-50%) to center the text within its container
This is the changed CSS script:
.subtitle .subtitle-text {
position: absolute;
text-align: center;
justify-content: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 0.8rem;
font-family: b;
left: 11%;
bottom: 10%;
transform: translateX(-50%);
width: 100%
}
you may also add width:100% to ensure that the text takes up the full width of its container.