Почему-то кнопка не хочет вставать в центр.
<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;
}
Простой
Простой
