在 bulma 中垂直居中元素答案

【问题标题】：Centering elements vertically in bulma在 bulma 中垂直居中元素
【发布时间】：2021-04-07 09:46:29
【问题描述】：

我正在尝试使用 Bulma 在虚线窗口内垂直居中一些元素我尝试了 is-vcentered 类，但它没有按我的预期工作

这是我使用的代码：

.fileupload {
  background-color: #ffffff;
  height: 200px;
  width: 100%;
  cursor: pointer;
  border: 2px dashed #629ef4;
  border-radius: 8px;
}

 <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>
              <span class="ddinfo">Drag & Drop your files here </span>
              <span class="ddinfo">OR </span>
              <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>

【问题讨论】：

你需要这样的结果吗？ - ibb.co/W5KSLq0
我想要这样的东西 - ibb.co/CHgP9rb

标签： html css bulma

【解决方案1】：

将display: flex;align-items: center;justify-content: center; 添加到.fileupload

将text-align: center; 添加到.column

并将 span 更改为 div 用于文本

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

【讨论】：