Как выровнять flex?

462
09 сентября 2018, 12:30

body { 
  font-family: 'Oswald', sans-serif; 
} 
 
img { 
  width: 196px; 
  height: auto; 
} 
 
h3 { 
  font-size: 24px; 
} 
 
form { 
  padding-top: 15px; 
} 
 
input[type=submit] { 
  margin-top: 5px; 
} 
 
.items { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
} 
 
.item { 
  position: relative; 
  padding-top: 15px; 
  width: 100%; 
  height: 170px; 
  text-align: center; 
} 
 
.item h3 { 
  position: absolute; 
  margin-left: auto; 
  margin-right: auto; 
  left: 0; 
  right: 0; 
  bottom: 0; 
} 
 
.main { 
  margin-top: 15px; 
} 
 
.menu { 
  padding-top: 40px; 
} 
 
.content { 
  text-align: center; 
} 
 
.contact-us { 
  text-align: center; 
  padding-top: 10%; 
} 
 
.footer { 
  font-size: 8px; 
  position: absolute; 
  padding-left: auto; 
  padding-right: auto; 
  left: 0; 
  right: 0; 
  bottom: 0; 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>PayLab</title> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> 
  <link rel="stylesheet" href="https://paylab.tk/css/main.css"> 
  <style> 
    img[alt="www.000webhost.com"] { 
      display: none; 
    } 
  </style> 
</head> 
 
<body> 
  <div class="menu"> 
    <div class="container"> 
      <div class="logo col-xl-3"> 
        <a href="https://paylab.tk/"><img src="https://paylab.tk/img/logo.png" alt=""></a> 
      </div> 
    </div> 
  </div> 
  <div class="main"> 
    <div class="container"> 
      <div class="items"> 
        <div class="item col-xl-3 offset-sm-3"> 
          <img src="https://paylab.tk/img/item1.png" alt=""> 
          <h3><a href="https://paylab.tk/mts.php/">Мтс</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item2.png" alt=""> 
          <h3><a href="https://paylab.tk/megafon.php/">МегаФон</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item3.png" alt=""> 
          <h3><a href="https://paylab.tk/beline.php/">Билайн</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item4.png" alt=""> 
          <h3><a href="https://paylab.tk/rostelecom.php/">Ростелеком</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item5.png" alt=""> 
          <h3><a href="https://paylab.tk/motiv.php/">Мотив</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item6.png" alt=""> 
          <h3><a href="https://paylab.tk/yota.php/">Yota</a></h3> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
 
</html>

Answer 1

Убрать класс offset-sm-3 для первого блока или прописать margin-left: 0 что я и сделал в коде ниже

body { 
  font-family: 'Oswald', sans-serif; 
} 
 
.offset-sm-3 { 
  margin-left: 0 !important; 
} 
 
img { 
  width: 196px; 
  height: auto; 
} 
 
h3 { 
  font-size: 24px; 
} 
 
form { 
  padding-top: 15px; 
} 
 
input[type=submit] { 
  margin-top: 5px; 
} 
 
.items { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
} 
 
.item { 
  position: relative; 
  padding-top: 15px; 
  width: 100%; 
  height: 170px; 
  text-align: center; 
} 
 
.item h3 { 
  position: absolute; 
  margin-left: auto; 
  margin-right: auto; 
  left: 0; 
  right: 0; 
  bottom: 0; 
} 
 
.main { 
  margin-top: 15px; 
} 
 
.menu { 
  padding-top: 40px; 
} 
 
.content { 
  text-align: center; 
} 
 
.contact-us { 
  text-align: center; 
  padding-top: 10%; 
} 
 
.footer { 
  font-size: 8px; 
  position: absolute; 
  padding-left: auto; 
  padding-right: auto; 
  left: 0; 
  right: 0; 
  bottom: 0; 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>PayLab</title> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> 
  <link rel="stylesheet" href="https://paylab.tk/css/main.css"> 
  <style> 
    img[alt="www.000webhost.com"] { 
      display: none; 
    } 
  </style> 
</head> 
 
<body> 
  <div class="menu"> 
    <div class="container"> 
      <div class="logo col-xl-3"> 
        <a href="https://paylab.tk/"><img src="https://paylab.tk/img/logo.png" alt=""></a> 
      </div> 
    </div> 
  </div> 
  <div class="main"> 
    <div class="container"> 
      <div class="items"> 
        <div class="item col-xl-3 offset-sm-3"> 
          <img src="https://paylab.tk/img/item1.png" alt=""> 
          <h3><a href="https://paylab.tk/mts.php/">Мтс</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item2.png" alt=""> 
          <h3><a href="https://paylab.tk/megafon.php/">МегаФон</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item3.png" alt=""> 
          <h3><a href="https://paylab.tk/beline.php/">Билайн</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item4.png" alt=""> 
          <h3><a href="https://paylab.tk/rostelecom.php/">Ростелеком</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item5.png" alt=""> 
          <h3><a href="https://paylab.tk/motiv.php/">Мотив</a></h3> 
        </div> 
        <div class="item col-xl-3"> 
          <img src="https://paylab.tk/img/item6.png" alt=""> 
          <h3><a href="https://paylab.tk/yota.php/">Yota</a></h3> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
 
</html>

READ ALSO
jScroll не работает на телефоне
HTML

jScroll не работает на телефоне

https://jscrollcom/ вот есть интересный плагин для lazy-load

 233
Как поднять значение в таблице если совпадают значения
jQuery

Как поднять значение в таблице если совпадают значения

есть таблица, при нажатии на checkbox с классом chk-all, выделяются весь столбец, как сделать, что подымалсь одинаковые значения равные классу green выше...

 252
Как менять карусель по разделам? Смена нескольких каруселей
jQuery

Как менять карусель по разделам? Смена нескольких каруселей

У меня три категории и у каждой есть свой карусель товаров на jQНужно чтобы отображался только один карусель и при нажатии на другую категорию...

 366
Uncaught TypeError: $(&hellip;).daterangepicker is not a function
jQuery

Uncaught TypeError: $(…).daterangepicker is not a function

При подключении JavaScript компонента Date Range Picker (http://wwwdaterangepicker

 255