Почему не работает justify-content: center;?

Почему-то кнопка не хочет вставать в центр.

603663b022d46186526557.jpeg

<body>
    <div class="container">
        <div class="header">
            <h1>Инструменты для макетирования</h1>
        </div>
        <!-- /.header -->

        <div class="main">
            <div class="main-box">
                <img src="img/1.png" alt="">
                <p>Резак 18 мм<span>от 500 руб.</span></p>
                <button>купить</button>
            </div>
            <!-- /.box -->
            <div class="main-box">
                <img src="img/2.png" alt="">
                <p>Реказ 9 мм<span>от 100 руб.</span></p>
                <button>купить</button>
            </div>
            <!-- /.box -->
            <div class="main-box">
                <img src="img/3.png" alt="">
                <p>Коврик для резки<span>от 350 руб.</span></p>
                <button>купить</button>
            </div>
            <!-- /.box -->
            <div class="main-box">
                <img src="img/4.png" alt="">
                <p>Линейка<span>от 400 руб.</span></p>
                <button>купить</button>
            </div>
            <!-- /.box -->
        </div>
        <!-- /.main -->
    </div>
    <!-- /.container -->
</body>


* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: sans-serif;
}
body {
  background-color: #f9f9f9;
}
.container {
  width: 70%;
  margin: auto;
}
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.main-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.main-box img,
.main-box p,
.main-box button {
  text-align: center;
}
.main-box button {
  display: inline-block;
  width: 50px;
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Работает. А кнопка горизонтально не по центру, потому что соответствующее центрирование не задано. Потому что justify-content распределяет содержимое блока вдоль главной оси, в качестве которой у вас установлена вертикальная (flex-direction: column).

Используйте align-items.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы