How to Vertically Center Elements in Bulma

How to vertically center elements in Bulma?

I think it's a bit funny that .columns does not have display:flex; by default (should it have perhaps?). Anyway, if you use something that adds flex, for example:

class="columns is-flex is-vcentered"

then you get display:flex from is-desktop and now suddenly is-vcentered works as intended.

Also I think the semantics is off since is-vcentered suggests that it is columns that gets vertically centered. But what it actually does (from source):

.columns.is-vcentered {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

is to make children of columns to be vertically centered inside columns. So you likely also need to set a height of your columns element for this to work.

I think is-vcentered should be named something like has-vcentered-content, but perhaps I'm missing something obvious.

tl;dr; Add height and flex to the columns-element for is-vcentered to do something.

Sorry, I guess this is more of a extrapolation of the problem and not a solution.

I believe the real solution is probably to use the existing hero-class here. (Which by the way centers manually using paddings, just like in Peter Leger's answer!).

How do I vertically center text and icons in Bulma?

.is-vcentered selector related only to columns:
https://bulma.io/documentation/columns/options/#vertical-alignment

.columns.is-vcentered {
    align-items: center;
}

Bulma >= 0.9.1

Since Bulma, 0.9.1 we can use flexbox helpers:

Combined with is-flex, all of the Flexbox CSS properties are available as Bulma helpers:

• flex-direction
• flex-wrap
• justify-content
• align-content
• align-items
• align-self
• flex-grow
• flex-shrink

Example:

<div class="is-align-items-center is-flex"></div>

Snippet:

<div class="container">
  <ul class="list">
    <li class="box list-item is-flex is-align-items-center  ">
      <span class="icon has-text-danger">
        <i class="fas has-text-success fa-2x fa-adjust"></i>
      </span>
      <h2 style="margin-left: 10px; font-size: 60px;  line-height: 1;">Hello world</h2>
      <h3 style="margin-left: auto;">Right text</h3>
    </li>
    <li class="box list-item  is-flex is-align-content-center">
      <span class="icon has-text-danger">
        <i class="fas has-text-danger fa-2x fa-exclamation-triangle"></i>
      </span>
      <h2 style="margin-left: 20px; font-size: 20px;">Item 2</h2>
      <h3 style="margin-left: auto;">Right text</h3>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

Center elements vertically in Bulma

You could add the following CSS so the right side column so it is vertically centered.

https://codepen.io/anon/pen/XzmEgr

.footer .has-text-right {
  display: flex;
  justify-content: center; 
}

Centering elements vertically in bulma

add display: flex;align-items: center;justify-content: center; to .fileupload

add text-align: center; to .column

and change span to div for texts

.fileupload {
  background-color: #ffffff;
  height: 200px;
  width: 100%;
  cursor: pointer;
  border: 2px dashed #629ef4;
  border-radius: 8px;
  display: flex;
    align-items: center;
    justify-content: center;
}
.column{
text-align: center;
}

 <div columns is-full>
          <div
            class="fileupload columns is-vcentered"
            appDragDropFileUpload
            (click)="fileField.click()"
            (fileDropped)="upload($event)"
          >
            <div class="column">
              <span class="icon has-text-primary">
                <fa-icon [icon]="faCloudUploadAlt" size="3x"></fa-icon
              ></span>
              <div class="ddinfo">Drag & Drop your files here </div>
              <div class="ddinfo">OR </div>
              <div class="file">
                <input
                  type="file"
                  name="avatars"
                  #fileField
                  (change)="upload($event.target.files)"
                  hidden
                  multiple
                />
                <span class="file-label is-primary"> Browse files </span>
              </div>
            </div>
          </div>
        </div>

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

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>

Center an item horizontally and have the items next to it centered vertically in bulma

.columns {
  display: flex;
}
.forImg {
  max-height: 250px;
  border-radius : 50%;
}

.forInfos {
  padding-left: 10px;
}

  <div class="columns">
        <div class="column forImg">
          <img src="https://picsum.photos/200" class="image-circle image-center">
        </div>
        <div class="column forInfos">
          <p class="bd-notification is-primary">TEXT GOES HERE</p>
          <p class="bd-notification is-primary">Some text</p>
          <button (click)="onSelect()" class="button is-link">Select</button>
        </div>
      </div>

Bulma: How to align an element left, but center it on mobile

Look at the modifier's table

https://bulma.io/documentation/helpers/typography-helpers/

It doesn't look consistent to me for example

has-text-left-mobile applies to mobile size only.

has-text-left-tablet applies to tablet and all larger sizes.

So you cannot assume that has-text-centered will apply to the remaining sizes, you should specify both mobile and tablet size.

On your second code

<div class="buttons has-text-centered-mobile has-text-left-tablet">

EDIT

Looking at it again, the problem is with class "buttons" which is flex and doesn't obey text-align. So you can just remove "buttons" class.

<div class="has-text-centered has-text-left-tablet">

---

Related Topics