Bulma框架card-header文本居中问题：has-text-centered不生效

我平时用Bulma框架定位文本很顺手，但最近遇到个问题：没法把card-header里的文本居中显示。我的尝试代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/>
<div class="columns mt-3">
        <div class="column is-3 ml-3" style="display: flex;">
            <div class="card has-background-warning-light">
                <div class="card-header">
                    <p class="has-text-right is-size-5 is-uppercase has-text-centered">
                        regular price
                    </p>
                </div>
                <div class="card-image">
                    <div class="has-background-warning">
                        <div class="has-text-centered">
                            <span class="is-size-1 has-text-weight-bold">
                                $ 999
                            </span>

                        </div>
                    </div>
                    <!-- <figure class="image is-3by1">
                        <img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder"/>
                    </figure> -->
                </div>
                <div class="card-content">
                    <div class="media">
                        <!-- <div class="media-left">
                            <figure class="image is-64x64">
                                {{ teacher.country.show_flag }}
                            </figure>
                        </div> -->
                        <div class="media-content">
                            <p class="title is-3" style="display: flex;">
                                standard price available for everyone
                            </p>
                            <p class="subtitle is-6 mt-1">
                                regular price
                            </p>
                        </div>
                    </div>
                    <div class="content has-text-centered">
                        <button class="button is-dark">
                          BUY  
                        </button>
                    </div>
                </div>
            </div>
        </div>

问题原因 #

1. 类样式冲突：你给p标签同时加了has-text-right和has-text-centered，这两个类都控制text-align属性，即使后者写在后面，也会和前者的样式产生干扰。
2. flex布局限制：Bulma的.card-header默认是flex布局容器，里面的子元素（你的p标签）默认不会占满容器的整个宽度。此时has-text-centered只是让p标签内部的文本在自身宽度范围内居中，而非整个card-header区域，所以看起来文本没有居中。

解决方法 #

方法一：移除冲突类并让子元素占满容器宽度

删掉has-text-right类，给p标签加上flex-grow-1类，让它撑满card-header的宽度，这样has-text-centered就能让文本在整个header区域居中：

<div class="card-header">
    <p class="flex-grow-1 is-size-5 is-uppercase has-text-centered">
        regular price
    </p>
</div>

方法二：利用flex布局的容器居中对齐

给card-header添加justify-content-center类，直接通过flex容器的属性让子元素居中，同时移除冲突的has-text-right类：

<div class="card-header justify-content-center">
    <p class="is-size-5 is-uppercase has-text-centered">
        regular price
    </p>
</div>

内容的提问来源于stack exchange，提问作者xtlc