CODEWITHSUNDEEP
css
joel
joel

Reputation: 255

How to align several images horizontally in CSS

I know the subject exists on stackoverflow and google but I am stuck with my code which is different.

I would like to align my 3 images below

enter image description here

I think to use the proprieties margin-left and margin-right but I think it's not correct.

.img-01{
  background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
  height: 197px;
  width: 27%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;

}

.img-02{
  background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
  height: 197px;
  width: 27%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
}

.img-03{
  background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
  height: 197px;
  width: 27%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
}
<img class="img-01">
<div class="img-01-title">Trust Management</div>
<img class="img-02">
<div class="img-02-title">Well Documented</div>
<img class="img-03">
 <div class="img-03-title">Great Support</div>

Upvotes: 0

Views: 34

Answers (3)

ryanbahan
ryanbahan

Reputation: 1

I assume you want to align your images horizontally - you'll want to first wrap each image and title within its own container (that way you can control their positioning as one "unit") and then wrap the group of 3 image containers in a single container that's set to display: flex and justify-content: space-between.

This will space the images horizontally with equal distance between them.

HTML:

<section class="all-images-container">
  <div class="image-container">
    <img src="https://via.placeholder.com/150">
    <p>Image title</p>
  </div>
  <div class="image-container">
    <img src="https://via.placeholder.com/150">
    <p>Image title</p>
  </div>
  <div class="image-container">
    <img src="https://via.placeholder.com/150">
    <p>Image title</p>
  </div>
</section>

CSS:

.all-images-container { display: flex; justify-content: space-between; }

Example here: https://codesandbox.io/s/images-container-1sick

Upvotes: 0

DCR
DCR

Reputation: 15665

#container{
display:flex;
justify-content:space-evenly;
}

.img-01{   
  background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
  height: 197px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
}
  
 
 


label{
display:block;
}

.img-02{
  background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
  height: 197px;
  width:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
}

.img-03{
  background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
  height: 197px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
}
<div id='container'>
   <div>
      <img class='img-01'/>
      <label class="img-01-title">Trust Management</label>
   </div>
   
   <div>
      <img class="img-02"/>
      <label class="img-02-title">Well Documented</label>
   </div>

   <div>
      <img class="img-03"/>
      <label class="img-03-title">Great Support</label>
   </div>
   
 </div>

Upvotes: 1

disinfor
disinfor

Reputation: 11533

Here's one way to do it, using flex-box:

* {
  /* reset element */
  box-sizing: border-box;
}


/* parent flex element */

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 -7px;
  justify-content: space-between;
}


/* wrap the content and the image */

.image-wrapper {
  /* flex-grow: 1, flex-shrink: 1, flex-basis:calc(33.333% - 20px)*/
  /* we use calc to remove the margin from the width of the element */
  flex: 1 1 calc(33.333% - 20px);
  margin: 0 10px;
}


/* All of these styles are shared by the .img element */

.img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
  height: 197px;
  width: 100%;
}

.img.img-01 {
  background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
}

.img.img-02 {
  background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
}

.img.img-03 {
  background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
}
<div class="wrapper">
  <div class="image-wrapper">
    <img class="img-01 img">
    <div class="img-01-title">Trust Management</div>
  </div>
  <div class="image-wrapper">
    <img class="img-02 img">
    <div class="img-02-title">Well Documented</div>
  </div>
  <div class="image-wrapper">
    <img class="img-03 img">
    <div class="img-03-title">Great Support</div>
  </div>
</div>

I also updated your CSS to remove all of the redundancy.

Upvotes: 1

Related Questions