Struggling to get words and Images inline - html

Question

enter image description hereI am trying to get text underneath the images and have the images inline, I am getting them in line to make a slide show. Please see my code below
HTML:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration Images">
<div class="text"><h6>British citizenship and
Immigration
</h6>
</div>
<div class="mySlides fade">
<img src="images/Australian Migration.jpg" alt="Australian Migration Images">
<div class="text"><h6>Australian Migration</h6>
<p class = "sent">Our team can assist with a range of Australian visa solutions. Our expert knowledge ensures you receive the best advice for your personal circumstances. </p>
</div>
</div>
<img src="images/Citizenship by investment.jpg" alt="Australian Migration Images">
<div class="text"><h6>Citizenship-by-investment</h6>
<p class = "sent">Enjoy the exclusive privileges that dual citizenship and international investment can provide. Our consultants can help you select the right programme and guide you every step of the way. </p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
CSS
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides
{
display: flex;
}
I have tried display grid with grid-template-columns, the text does not go underneath and that does not seem to work.
Anyone have a solution?

Answer 1

Try to add display: inline-block on the actual Elements( that is the image and the word)

Answer 2

I managed to get it in line with the text underneath.
HTML
<div class="row">
<div class="column animation">
<img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration">
<h1>British citizenship and Immigration</h1>
</div>
<div class="column">
<img src="images/Australian Migration.jpg" alt="Australian Migration">
<h1>Australian Migration</h1>
<p>Our team can assist with a range of Australian visa solutions. Our expert knowledge ensures you receive the best advice for your personal circumstances.</p>
</div>
<div class="column">
<img src="images/Citizenship by investment.jpg" alt="Citizenship by investment">
<h1>Citizenship-by-investment</h1>
<p>Enjoy the exclusive privileges that dual citizenship and international investment can provide. Our consultants can help you select the right programme and guide you every step of the way.</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
CSS
.row {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
padding: 0px 8rem 0px 338px;
margin-top: -33vh;
margin-left:10vw;
}
.column {
flex:10%;
padding: 0 4px;
}
.prev, .next {
cursor: pointer;
position: relative;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #115577;
font-weight: bold;
font-size: 30px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
text-decoration: none;
top:7rem;
right: 26rem;
border-radius: 3px 0 0 3px;
}
.prev
{
text-decoration: none;
top:7rem;
left: -126rem;
}
.column h1
{
font-size:16px;
margin-left: 2.5rem;
}
.column img
{
margin-left:1vw;
}
.column p
{
text-align: center;
margin-left: 0rem;
margin-right: 25rem;
}
.animation {
animation-name: animation;
animation-duration: 1.5s;
}
#keyframes animation {
from {opacity: .4}
to {opacity: 1}
}
Thank you all for your help