Centering elements vertically in bulma

user_9510077 0
Viewed 78

I am trying to center some elements vertically inside a dashed window using Bulma I tried the is-vcentered class but it did not work how I expected

Here is the code I used :

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

bulma css html
1 Answers

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>

user_110502310
Related