html – How to space images evenly and add text below them


It has been quite some time since I ever had to use HTML or CSS. I am trying to to add 3-4 images in a horizontal line along with some text below each of them. I would like each image + text to be spaced evenly and also have them stack vertically when the browser is resized. What is the best way to go about this? My code right now is absolute crap and I honestly don’t know where to begin.

<style><!--
#container {
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150%;
  height: 125%;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

--></style>
<div id="container">

<div class="box1"><img src="img" /><b text-align="center">Test for bold header</b><br />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>

<div class="box2"><img src="img" width="200px" />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>

<div class="box3"><img src="img" width="200px" />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>

<div class="box4"><img src="img" width="200px" />
<p>This is a bunch of test text to see if the text will actually center below the image</p>
</div>
 
<span class="stretch"></span></div>

I am sure there is a MUCH simpler way to do this that doesn’t require all of this crap code I pieced together. I am trying to mimic something like this https://tomorrowslaundry.co/pages/essentials-club-welcome?sscid=81k5_bf9d1& under the section “Why it works”

Any help or guidance would be appreciated.



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here