如何使用 Bulma 垂直对齐居中列内的元素？答案

【问题标题】：How do I vertically align elements inside a centered column, using Bulma?如何使用 Bulma 垂直对齐居中列内的元素？
【发布时间】：2021-06-10 22:24:59
【问题描述】：

如何使用 Bulma 垂直对齐居中列内的元素？

当前结果：

我的代码：

<template>
  <div id="dataFetcher" class="box">
    <h1 class="block">Data Fetcher</h1>
    <div class="columns is-vcentered is-centered">
      <div id="123" class="column has-background-success is-half">
          <input type="text" class="">
          <button type="button" :class="{ 'is-loading': isLoading } " class="block button is-vcentered" @click="fetchData">Fetch data</button>
      </div>
    </div>
  </div>
</template>

思考：

我使用.columns .is-centered div 水平居中。检查。

但对于垂直对齐，.columns .is-vcentered 不是答案，因为它需要两个单独的列（这对我来说感觉是错误的方法？）。

我看到的其他参考资料暗示使用 .is-flex .is-align-items-center 来执行一些 Flexbox 操作，但是将其放在列 div 上或内部会破坏 .columns 的水平对齐方式。

【问题讨论】：

标签： css bulma

【解决方案1】：

如果文本输入有 input 类，那么我会将字段放入水平字段容器中：

<template>
  <div id="dataFetcher" class="box">
    <h1 class="block">Data Fetcher</h1>
    <div class="columns is-vcentered is-centered">
      <div id="123" class="column has-background-success is-narrow">

        <div class="field is-horizontal">
          <div class="field-body">
            <div class="field">
              <p class="control">
                <input type="text" class="input">
              </p>
            </div>
            <div class="field">
              <p class="control">
                <button type="button" class="button">Fetch data</button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

【讨论】：