Позиционирование flexbox в css

204

30 августа 2018, 15:30

section { 
  width: 900px; 
  height: 200px; 
} 
 
.services_imgs { 
  display: inline-flex; 
  box-sizing: border-box; 
  margin-top: 79px; 
} 
 
.services_i:nth-child(1) { 
  background-image: url(img/icon1.png); 
  background-repeat: no-repeat; 
} 
 
.services_i:nth-child(2) { 
  background-image: url(img/icon2.png); 
  background-repeat: no-repeat; 
} 
 
.services_i:nth-child(3) { 
  background-image: url(img/icon3.png); 
  background-repeat: no-repeat; 
} 
 
.services_i { 
  display: block; 
  height: 73px; 
  width: 74px; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Home</title> 
  <link rel="stylesheet" href="main.css"> 
  <!DOCTYPE html> 
  <html lang="en"> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>Home</title> 
    <link rel="stylesheet" href="main.css"> 
  </head> 
 
  <body> 
 
    <section> 
 
      <div class="services_imgs"> 
        <div class="services_i"> 
 
        </div> 
        <div class="services_i"> 
 
        </div> 
        <div class="services_i"> 
 
        </div> 
      </div> 
    </section> 
  </body> 
 
  </html>

Вопрос: можно ли выровнить services_imgs по центру section?

Answer 1

Можно:

section {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

section { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 900px; 
  height: 200px; 
  outline: 1px solid black; 
} 
 
.services_imgs { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  outline: 1px solid brown; 
} 
 
.services_i:nth-child(1) { 
  background-color: green; 
} 
 
.services_i:nth-child(2) { 
  background-color: blue; 
} 
 
.services_i:nth-child(3) { 
  background-color: yellow; 
} 
 
.services_i { 
  display: block; 
  height: 73px; 
  width: 74px; 
  outline: 1px solid black; 
}

<section> 
 
  <div class="services_imgs"> 
    <div class="services_i"> 
 
    </div> 
    <div class="services_i"> 
 
    </div> 
    <div class="services_i"> 
 
    </div> 
  </div> 
</section>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Container и как с ним бороться

Добрый день уважаемые коллеги

163

HTML

Как задать border у определенной колонки таблицы и убрать ее по нажатию кнопки?

Как можно задать стили и onClick, чтобы при выборе соответствующего переключателя radio вокруг 2-й (4-й) колонки появлялась рамка:

208

HTML

Изъять id,динамически созданного инпута

Создаю input элементы динамически, а далее нужно вытянуть из них данныеКак быть, если создано сразу два или более input'ов? Мне нужно самому указывать...

185

HTML

Аналоги babel для разбора JSX в браузере

Нашел в интернете неплохой набор компонентов для ReactМанипулируя ими можно многократно ускорить процесс разработки веб-сайта, относительно...

163