Menu
I am using bulma framework , and all the content is to the left, how would I center the content on the page? For example this image is to the left.
<section class="section">
<div class="container">
<div class="column">
<figure>
<img src="/assets/images/norris-lake.jpg" alt="Melton Hill Lake">
</figure>
</div>
</div>
</section>
583
You can make the columns centered by using .is-centered modifier on the columns container. Bulma also allows adding .is-multiline modifier to make multiple columns centered in a single row.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
To center one box inside another we make the containing box a flex container. Then set align-items to center to perform centering on the block axis, and justify-content to center to perform centering on the inline axis.
Have a look at the Bulma docs for Centering columns
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet" />
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<figure>
<img src="https://placeimg.com/640/480/any" alt="Melton Hill Lake">
</figure>
</div>
</div>
</div>
</section>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
