在Bulma中水平居中项目的最佳方法是什么？

Question

我希望有一个占据五分之三宽度的部分，并且它是居中的。起初，当只有“section”时，内容是水平居中的，但它占据了整个屏幕的宽度。所以我添加了一个列的父div，其中包含一个is-three-fifths的列。现在我有一个占据五分之三宽度的部分，但没有居中，那么最好的方法是什么？

.section{
            border: 1px solid;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />


        <div class="columns">
            <div class="column is-three-fifths">
                <section class="section">
                    <div class="container">
                        <figure class="image is-128x128">
                            <img src="https://bulma.io/images/placeholders/256x256.png">
                        </figure>
                    </div>
                </section>
            </div>
        </div>

- user9644796

Answer 1

在figure标签上添加margin: auto;。

.section{
            border: 1px solid;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />


        <div class="columns">
            <div class="column is-three-fifths">
                <section class="section">
                    <div class="container">
                        <figure class="image is-128x128" style="    margin: auto;">
                            <img src="https://bulma.io/images/placeholders/256x256.png">
                        </figure>
                    </div>
                </section>
            </div>
        </div>

- Nandita Sharma

Answer 2

您可以将 is-centered 类添加到 div.columns。详情请参见https://bulma.io/documentation/columns/options/#centering-columns。

.section{
    border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />


        <div class="columns is-centered">
            <div class="column is-three-fifths">
                <section class="section">
                    <div class="container">
                        <figure class="image is-128x128">
                            <img src="https://bulma.io/images/placeholders/256x256.png">
                        </figure>
                    </div>
                </section>
            </div>
        </div>

- AvcS

---

谢谢，我最终使用了偏移量：<div class="column is-three-fifths is-offset-one-fifth">，这也是一个有效的解决方案，对吧？ - user9644796