How can I align 4 photos side by side, and their individual text under them?

Question

I am trying to create a basic online store type of layout. Just very basic beginners CSS and HTML

Answer 1

Here is how to do that using flex styling. This is a great source for learning flex box (it's what I go to whenever I forget something).

#container{
   display: flex; /*specifies that the items in the container should abide by flex styling*/
   flex-direction: row; /*aligns the items in the container in a row*/
}

.imgContainer{
   text-align: center;  /*aligns the text in the center*/
   padding: 2%; /*adds some extra white space around images*/
}

<!-- container element for all of the content. 
It will line up the imgContainers in a row-->
<div id="container"> 
  <!--imgContainers will contain each img and text combination -->
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
</div>