How to align a text outside and below a box? - html

Question

So, I'm taking a course in TOP its basically a about web development. Right now I'm working in a project that the website wants me to do.
I've been facing a problem lately regarding aligning a text outside and below a box (div).
.title{
text-align: center;
font-size:36px;
font-weight: bolder;
color: #1F2937;
margin-top: 45px;
}
.second_container{
display: flex;
justify-content: center;
/* align-items: center; */
padding: 30px 0px;
gap:32px;
}
.image{
border: 4px solid dodgerblue;
border-radius: 8px;
width: 150px;
height: 150px;
text-align: center;
}
span.txt{
font-size: 18px;
}
<div class="title">
Some random Information.
</div>
<div class="second_container">
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration
or image.
</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration
or image.
</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration
or image.
</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration
or image.
</span>
</div>
</div> <!--end of the random info container-->
I'm always getting the text inside the box. But I need the text outside and below it

Answer 1

Your text is nested in .image which has the border so it will always be inside without absolute positioning. Put the border on where the img will be, in this case, .img. Then the text will flow underneath.
.title {
text-align: center;
font-size: 36px;
font-weight: bolder;
color: #1F2937;
margin-top: 45px;
}
.second_container {
display: flex;
justify-content: center;
/* align-items: center; */
padding: 30px 0px;
gap: 32px;
}
.img {
border: 4px solid dodgerblue;
height: 150px;
border-radius: 8px;
text-align: center;
}
.image {
width: 150px;
}
span.txt {
font-size: 18px;
}
<!--start of the random info container-->
<div class="title">
Some random Information.
</div>
<div class="second_container">
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
</div>
<!--end of the random info container-->