以文本为中心的布尔玛效果不佳

Question

我尝试使用Bulma中的has-text-centered将内容居中。 但是“ Hello”在左边有点偏离。为什么？

我的代码：

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

My Output:

Answer 1

在通知类中，有“ padding：1.25rem 2.5rem 1.25rem 1.5rem”，您需要将其更改为“ padding：1.25rem 1.5rem 1.25rem 1.5rem”。

Answer 2

检查此帖子。 以文本为中心是一个类，因此您需要将该属性赋予该特定的类，这意味着 text-align：center; 如果要在左侧显示文本，则用于居中对齐因此在 has-text-left 类中，将 text-align：left; 用于左对齐。

.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>