bulma - Bulma 中框元素的大小和居中

Question

我有一个登录模式，其中有一个框，具有以下 CSS 结构:

<div class="modal" v-bind:class="{ 'is-active': isActive }">
    <div class="modal-background">
    </div>
    <div class="modal-content">
        <div class="box">
            // content 
            // content 
            // content 
        </div>
    </div>
</div>

我想将盒子的大小更改为特定宽度。例如，如果我设置 .box { width: 600px }; 框尺寸会增大，但它不会自动居中 - 宽度只会添加到右侧。有什么方法可以改变盒子的大小，同时保持水平居中吗？

Answer 1

您所要做的就是将盒子包裹在一个列中。并为该列提供您需要的盒子尺寸。

<div className="column is-one-third">
      <div className="box">
      </div>
</div>