[Vuejs]-How do I vertically center text and icons in Bulma?

by

7👍

✅

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

Bulma < 0.9.1 (Old answer)

For lists – No "built-in" way (by helpers) to align icons and text (yet).
One solution – use core is-flex and one CSS custom style (For align-items: center;) .

Snippet:

/* one custom class (not from bulma core) */
li.vcenter{
  align-items: center;
}
<div class="container">
  <ul class="list">
    <li class="list-item is-flex vcenter">
      <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="list-item  is-flex vcenter">
      <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.8.2/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

Related: How to center text vertically with a large font-awesome icon?

👤Ezra Siton

Leave a comment