Best approach to center items horizontally on Bulma

user9644796 picture user9644796 · May 31, 2018 · Viewed 7k times · Source

I want to have a section that's three fifths columns wide, and that it will be centered. At first when I only had "section", the content was horizontally centered, but it took the entire width of the screen. So I added a parent div of columns with a column of is-three-fifths. Now I have a section that is three-fifths wide, but not centered, so what is the best approach to do that?

Answer

Nandita Sharma picture Nandita Sharma · May 31, 2018

Add margin: auto; on figure tag

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