Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to vertically and horizontally center some content the Bulma way?

Tags:

css

bulma

I would like to center content both horizontally and vertically and I would like to do it the "bulma way" (without adding extra CSS). My example is working but I feel it's "hacky".

Here is the best I have achieved

html,
body,
.container,
.section {
  height: 100%;
}

.column {
  flex-direction: column;
  justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />

<section class="section">
  <div class="container is-flex">
    <div class="column is-flex has-text-centered">
      <div class="box">
        My content
      </div>
    </div>
  </div>
</section>
like image 462
Romain Avatar asked Aug 21 '19 10:08

Romain


People also ask

How do you center an element both vertically and horizontally?

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.

How do you vertically center in Bulma?

The Bulma Vertical alignment is used to align your columns vertically, add the is-vcentered modifier to the columns container. Bulma Vertical Alignment Class: is-vcentered: This class is used to center the columns vertically.

How do you center align text vertically and horizontally?

To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.

How do you center a card in Bulma?

You can center the card-header-title by appending the is-centered modifier.

How to center a column vertically in Bulma?

The Bulma Vertical alignment is used to align your columns vertically, add the is-vcentered modifier to the columns container. is-vcentered: This class is used to center the columns vertically. Example: Below example illustrates the Bulma vertical alignment. the First Column.

What is align-content in Bulma?

Bulma align-content is used to specify the alignment between the lines inside a flexible container. It defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.

Why are the columns not vertically centered in this section?

The columns are not vertically centered because you have used a height for the section. Use padding to increase the height. and use your own padding.

How do I align my columns vertically?

To align your columns vertically, add the is-vcentered modifier to the columns container. Second column with more content. This is so you can see the vertical alignment.


1 Answers

Edit: I found the solution using the hero helper in the Bulma docs

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

<section class="hero is-fullheight">
  <div class="hero-body has-text-centered">
    <div class="container">
      <div class="box">
        My content
      </div>
    </div>
  </div>
</section>
like image 104
Romain Avatar answered Sep 22 '22 15:09

Romain