Bulma 的 has-text-centered 效果不佳

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

通知class中有"padding:1.25rem 2.5rem 1.25rem 1.5rem"你需要改成这个"padding: 1.25rem 1.5rem 1.25rem 1.5rem".

Answer 2

检查此 post。 has-text-centered 是一个 class 所以你需要把属性给那个特定的 class 意味着 text-align : centre; 用于居中对齐，如果您希望文本位于左侧，因此使用 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>

Bulma 的 has-text-centered 效果不佳

has-text-centered of Bulma does not work well

html

css

bulma