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

Question

我尝试使用布尔玛has-text-centered将我的内容居中。但是"你好"有点偏左。为什么？

我的代码：

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

我的输出：

Answer 1

在通知类中有"填充：1.25rem 2.5rem 1.25rem 1.5rem"，您需要将其更改为"填充：1.25rem 1.5rem 1.25rem 1.5rem"。

Answer 2

检查这篇文章。 has-text-center是一个类，因此您需要将属性赋予该特定类 表示文本对齐：中心; 对于居中对齐，如果您希望左侧的文本，请使用文本对齐：左; 对于左对齐，在 has-text-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>