Placing texts between pictures - html

Question

How do i make a scroll-able horizontal line up of round shaped images that originate from a square shaped images with a captions below. And if possible make it seperate each other. Sorry for the bad grammar

Answer 1

Before I answer your question please note that Stack Overflow is not a platform to ask for code but rather to seek help with not-working code you have already written yourself. As mentioned by CBroe already we highly recommend reading How to Ask. Don't expect answers like this in the future.
First of all the question is how to structure the elements in HTML before we come to the CSS part. Since you're asking for a line up of multiple elements having a "container - element" structure seems suggestive.
div (container)
div (element1)
div (element2)
div (element3)
...
/div
Now we have to put the round image together with the caption below in the element. That's also pretty simple:
div (element)
img (circular picture)
div (caption)
/div
Let's translate this into proper HTML
<div class="container">
<div class="elem">
<img src=""/>
<div>Caption #1</div>
</div>
<div class="elem">
<img src=""/>
<div>Caption #2</div>
</div>
<div class="elem">
<img src=""/>
<div>Caption #3</div>
</div>
...
</div>
Time to get into CSS. As of right now every element is aligned vertically, not horizontally. One solution I personally really like is Flexbox. It lets you play dynamically with multiple elements which is exactly what we are looking for.
.container {
display: flex;
overflow-x: scroll;
}
That's enough to have each Element aligned horizontally as Flexbox structures the items horizontally by default. overflow-x: scroll; prevents the items to resize the web page and will make the container horizontally scrollable as a fix.
The only thing that's left is to make the image circular and that is super easy to do. All we have to do is to add a border-radius which is bigger than the image size itself:
.elem img {
width: 100px;
height: 100px;
border-radius: 500px;
}
Done.
.container {
display: flex;
overflow-x: scroll;
}
.elem {
padding: 8px;
}
.elem img {
margin: 8px;
background-color: grey;
height: 100px;
width: 100px;
border-radius: 5000px;
}
.elem div {
text-align: center;
font-size: 18px;
}
<div class="container">
<div class="elem">
<img class="pic" src="https://www.famousbirthdays.com/headshots/justin-bieber-2.jpg" />
<div>Caption #1</div>
</div>
<div class="elem">
<img/>
<div>Caption #2</div>
</div>
<div class="elem">
<img/>
<div>Caption #3</div>
</div>
<div class="elem">
<img/>
<div>Caption #4</div>
</div>
<div class="elem">
<img/>
<div>Caption #5</div>
</div>
<div class="elem">
<img/>
<div>Caption #6</div>
</div>
<div class="elem">
<img/>
<div>Caption #7</div>
</div>
</div>