0

Верстаю такой блок:

введите сюда описание изображения

Вот что у меня получилось:

введите сюда описание изображения

Ссылка, оформленная в виде кнопки, со свойством 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>

2
  • Все работает как положено. С чего вы взяли, что inline-block тоже должен выравниваться по центру?
    – kost1k
    9 дек 2020 в 21:17
  • @kost1k должен выравниваться по макету. Я margin 0 auto сделал, а он не выровнял ссылку по центру, если к ней display : inline-block сделать. 10 дек 2020 в 10:19

2 ответа 2

2

Блочные элементы всегда стремятся занять всю доступную ширину, если открыть инспектор и навести на блочный элемент с фиксированной шириной, то мы заметим, что оставшуюся часть справа занимает своеобразный margin (который мы явно не указывали), чтобы заполнить оставшуюся ширину и не дать встать там другим элементам. По этому при выставлении горизонтальных margin'ов в значение auto элемент прижимается к одной из сторон, а в случае с margin: 0 auto центрируется. А inline-block элементы, уже не обладают данными свойствами, по этому если посмотреть в инспекторе, увидим, что блок занимает только отведенную ему ширину и при наличии рядом аналогичных блоков они будут выстраиваться в ряд. По этому margin: 0 auto не применим для центрирования inline-block элементов, за-то его можно обернуть и выровнять при помощи text-align: center для родительского блока.
А в целом для выравнивания актуально использовать display: flex, но здесь также потребуется обертка для элемента.

.block {
  width: 150px;
  height: 100px;
  background-color: blue;
}

.block-2 {
  margin-left: auto;
}

.block-3 {
  margin: 0 auto;
}

.inline-block {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: red;
}
<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>
<br><br><br>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>

2

Можно завернуть ссылку в родительский див и присвоить ему text-align: center

1
  • это работает, но мне интересно узнать почему margin: 0 auto не сработал 10 дек 2020 в 17:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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