Верстаю такой блок:
Вот что у меня получилось:
Ссылка, оформленная в виде кнопки, со свойством display: inline-block;
упорно не хочет становиться по центру. Уже 10 минут ломаю голову почему. При этом если заменить свойство на display: block;
ссылка будет по центру, хотя с inline-block
тоже должна быть. Помогите разобраться, что не так. Моя разметка и стили:
* {
padding: 0;
margin: 0;
border: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a:focus,
a:active {
outline: none;
}
nav,
footer,
header,
aside {
display: block;
}
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: "Poppins", "sans-serif";
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: 400;
}
/*Смотреть отсюда! то, что выше — обнкляющий стиль */
body {
font-family: "Poppins", sans-serif;
font-weight: 500;
line-height: 26px;
color: #544837;
font-size: 14px;
}
.container {
max-width: 1124px;
margin: 0 auto;
padding: 0 10px;
}
.page-section__btn,
.page-section__link {
display: inline-block;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #fff;
background-color: #ff9900;
padding: 15px 41px 14px;
}
.tools {
padding-top: 110px;
}
.tools__title {
margin: 0 auto 46px;
max-width: 539px;
text-align: center;
font-size: 36px;
line-height: 54px;
padding: 0 10px;
}
.tools__items {
display: flex;
justify-content: space-between;
padding: 8px 16px 0px;
margin-bottom: 60px;
}
.tools__item {
max-width: 240px;
}
.tools__item-img {
margin-bottom: 30px;
}
.tools__item-title {
font-weight: 600;
line-height: 33px;
margin-bottom: 13px;
font-size: 22px;
}
/* вызывает проблемы, заменить на display: block и встанет по центру */
.tools__link {
display: inline-block;
padding: 15px 32px 14px;
line-height: 24px;
font-weight: 600;
width: 173px;
margin: 0 auto;
}
<section class="page-section tools">
<h3 class="page-section__title tools__title">We design tools to unveil your superpowers</h3>
<div class="tools__inner">
<div class="container">
<div class="tools__items">
<div class="tools__item">
<img class="tools__item-img" src="images/tools/01.svg" alt="tools img 1">
<h6 class="tools__item-title page-section__title">First click tests</h6>
<p class="tools__item-text">While most people enjoy casino gambling</p>
</div>
<div class="tools__item">
<img class="tools__item-img" src="images/tools/02.svg" alt="tools img 2">
<h6 class="tools__item-title page-section__title">Design surveys</h6>
<p class="tools__item-text">Sports betting, lottery and bingo playing for the fun</p>
</div>
<div class="tools__item">
<img class="tools__item-img" src="images/tools/03.svg" alt="tools img 3">
<h6 class="tools__item-title page-section__title">Preference tests</h6>
<p class="tools__item-text">The Myspace page defines the individual.</p>
</div>
<div class="tools__item">
<img class="tools__item-img" src="images/tools/04.svg" alt="tools img 4">
<h6 class="tools__item-title page-section__title">Five second tests</h6>
<p class="tools__item-text">Personal choices and the overall personality of the person.</p>
</div>
</div>
</div>
<a class="page-section__link tools__link" href="#">SIGN UP NOW</a>
</div>
</section>