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 >
<div >
<img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration Images">
<div ><h6>British citizenship and
Immigration
</h6>
</div>
<div >
<img src="images/Australian Migration.jpg" alt="Australian Migration Images">
<div ><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 ><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 onclick="plusSlides(-1)">❮</a>
<a 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?
CodePudding user response:
Try to add display: inline-block
on the actual Elements( that is the image and the word)