2

Нужно чтобы картинки были по центру, но все ни как не получается...

* {
  font-family: 'Planet N', arial;
  text-decoration: none;
}


/* ВЕРХНЯЯ ПАНЕЛЬ (ПОЛОСКА)*/

.clearfix:after {
  content: '';
  display: table;
  width: 100%;
  clear: both;
}

body {
  margin: 0 auto;
  padding: 0;
}

div {
  box-sizing: border-box;
}

header {
  background: url(../img/1.jpg) no-repeat center top / cover;
  height: 100vh;
}

.container {
  width: 930px;
  margin: 0 auto;
}

.logo {
  margin-top: 41px;
  float: left;
}

nav {
  float: right;
  margin-top: 45px;
}

.menu {
  padding: 0;
  margin: 0;
  display: block;
}

.menu li {
  float: left;
  display: block;
  margin-right: 41px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

.titles__first {
  font-size: 40px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-top: 150px;
}

h1 {
  font-size: 75px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin: 15px;
  padding-top: 60px;
}

.button {
  background: #fed136;
  color: #484543;
  border-radius: 3px;
  display: block;
  width: 240px;
  padding: 20px 0;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
  margin-top: 50px;
}

.title {
  padding-top: 115px;
}

.title h2 {
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

.title p {
  color: #777777;
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
}

.servises_item {
  width: 270px;
  float: left;
  text-align: center;
}

.servises_item p {
  color: #777777;
  font-size: 20px;
  line-height: 1.9em;
}

.servises_item h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.servises_item:last-child {
  float: right;
}

.servises_item:nth-child(2) {
  margin-left: 60px;
}

.servises {
  margin-top: 80px;
}

#portfolio {
  background: #F7F7F7;
  padding-bottom: 120px;
}

#servises {
  padding-bottom: 120px;
}

.works img {
  float: left;
}

.works img:last-child {
  float: right;
}

.works img:nth-child(2) {
  margin-left: 23px;
}

.humble {
  margin-top: 80px;
  width: 200px;
  text-align: center;
}

.humble_item p {
  color: #777777;
  font-size: 15px;
}

.humble h2 {
  font-size: 15px;
}

.humble_item img {
  margin-right: 200px;
}

footer {
  text-align: center;
  padding-top: 100px;
}
<section id="humble">
  <div class="container">
    <div class="title">
      <h2>Обо мне</h2>
      <p>
        Сейчас придумаю ...
      </p>
    </div>
    <div class="humble clearfix">
      <div class="humble_item ">
        <img src="assets/img/about1.jpg">
        <img src="assets/img/about2.jpg">
        <img src="assets/img/about3.jpg">
      </div>
      <div class="humble_item">
        <h2>July 2010</h2>
        <h2>Our humble beginnigs</h2>
        <p>TUTA PEZDA WASHE</p>
      </div>
      <div class="humble_item">
        <h2>Junaty 2011</h2>
        <h2>Our humble beginnigs</h2>
        <p>TUTA PEZDA WASHE</p>
      </div>
      <div class="humble_item">
        <h2>december 2012</h2>
        <h2>Our humble beginnigs</h2>
        <p>TUTA PEZDA WASHE</p>
      </div>
    </div>
  </div>
</section>

1 ответ 1

2

Ваш пример нормально посмотреть не получилось, так как у картинок инвалидный путь, но если вам необходимо какие-то блоки разместить по центру экрана, то это можно сделать так.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.item {
  background-color: green;
  width: 200px;
  height: 100px;
  margin: 4px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.