Булма с текстовым центром не работает

Question

Я попытался центрировать свой контент, используя has-text-centered из Bulma . Но «Привет» немного левее. Почему?

Мой код:

<div class="columns is-multiline">
<div class="column is-2"><p class="notification is-primary has-text-centered">Hello</p></div>
</div>

Мой вывод:

Answer 1

Проверьте этот пост. has-text-centtered - это класс, поэтому вам нужно присвоить этому конкретному классу свойство означает text-align: center; для выравнивания по центру, если вы хотите, чтобы текст слева, поэтому используйте text-align: left; для выравнивания по левому краю в has-text-left class.

.is-multiline {
  background-color: #00d1b2;
  padding: 15px;
  width: 100px;
  color: #ffffff;
}
.has-text-centered {
  text-align: center;
} 

.has-text-left {
  text-align: left;
}

.has-text-right {
  text-align: right;
}

<div class="columns is-multiline">
<div class="column is-2"><p class="notification is-primary has-text-centered">Hello</p></div>
</div>

Answer 2

В классе уведомлений есть "padding: 1.25rem 1.5rem 1.25rem 1.5rem", вам нужно заменить его на "padding: 1.25rem 1.5rem 1.25rem 1.5rem".