在 bulma 中垂直居中元素

Question

我正在尝试使用 Bulma 在虚线 window 中将一些元素垂直居中我尝试了 is-vcentered class 但它没有像我预期的那样工作

这是我使用的代码：

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

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

在 bulma 中垂直居中元素

Centering elements vertically in bulma

html

css

bulma