Question

我想要一个宽五分之三列的部分，并且它将居中。首先，当我只有＆＃34; section＆＃34;时，内容是水平居中的，但它占据了屏幕的整个宽度。所以我添加了一个列的父div，其列为is-five-fives。现在我有一个五分之五宽的部分，但没有居中，所以最好的办法是什么？

＆＃13;

.section{
            border: 1px solid;
        }

＆＃13;

<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>

＆＃13;

Answer 1

您可以将is-centered课程添加到div.columns。 https://bulma.io/documentation/columns/options/#centering-columns

＆＃13;

.section{
    border: 1px solid;
}

＆＃13;

<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>

＆＃13;

Answer 2

在数字标记

上添加margin: auto;

＆＃13;

.section{
            border: 1px solid;
        }

＆＃13;

<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>

＆＃13;

布尔玛水平居中项目的最佳方法

2 个答案: