Как выровнять несколько изображений по горизонтали в CSS

Question

Я знаю, что тема существует в stackoverflow и google, но я застрял в своем коде, который отличается.

Я хотел бы выровнять свои 3 изображения ниже

Я думаю использовать свойства margin-left и margin-right, но я думаю, что это не правильно.

.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>

Answer 1

Вот один из способов сделать это, используя 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>

Я также обновил ваш CSS для удаления всей избыточности.

Answer 2

#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>

Answer 3

Я предполагаю, что вы хотите выровнять свои изображения по горизонтали - вам нужно сначала обернуть каждое изображение и заголовок в свой собственный контейнер (таким образом, вы можете контролировать их расположение как один «блок»), а затем обернуть группу из 3 изображений контейнеры в одном контейнере, для которого установлено отображение: flex и justify-content: space -ween.

Это позволит расположить изображения горизонтально на одинаковом расстоянии между ними.

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; }

Пример здесь: https://codesandbox.io/s/images-container-1sick