布尔玛CSS居中卡

Question

我目前正在为Pomodoro Timer构建应用程序，我将Bulma作为CSS框架使用，到目前为止，我很喜欢它，我仍在学习Flexbox的工作方式，我想知道是解决这种情况的最佳方法，并且可以仅使用布尔玛类完成，或者如果我必须创建自己的类。

我正在尝试为添加的每个任务创建“卡片”，但我希望它们仅占整个屏幕宽度的一半或更小。我不明白如何使用布尔玛来实现这一目标，因为所有内容都占据了整个宽度，而且由于没有硬编码的宽度，所以我不能仅将所有内容居中。这是我包含任务卡的部分的代码。

 <div class="section">
        <div class="task-container is-center">
            <div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
                <input type="checkbox" class="checkbox">
                <span class="has-text-left">
                     {{task.desc}}
                </span>
                <span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
                <span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
            </div>
        </div>
    </div>

任何帮助，提示，建议等。将不胜感激！。

Answer 1

您可以使用列类来实现所需的目标

 <div class="task-container columns is-multiline">
        <div class="card column is-half is-offset-one-quarter">
            // statements
        </div>
    </div>

以下是官方文档的链接：https://bulma.io/documentation/columns/options/#centering-columns

如果不想使用offset类，可以用card容器包装columns div并使用is-half类。