Лучший подход для центрирования предметов по горизонтали на Bulma - PullRequest
Новая
       6

Лучший подход для центрирования предметов по горизонтали на Bulma

0 голосов
/ 31 мая 2018

Я хочу иметь раздел шириной в три пятых столбца, который будет центрирован.Сначала, когда у меня был только «раздел», контент был горизонтально центрирован, но он занимал всю ширину экрана.Поэтому я добавил родительский div столбцов со столбцом is-Three-Fives.Теперь у меня есть раздел шириной в три пятых, но не по центру, так как лучше всего это сделать? 

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

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Вы можете добавить 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>
0 голосов
/ 31 мая 2018

Добавить 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>
...