css - Vuetify - 在 v-card 中水平居中 v-progress-linear

Question

我有一个自定义组件，它是 Vuetify v-dialog：

<template>
  <v-dialog v-model="input" persistent max-width="400">
    <v-card>
      <v-card-title class="headline">{{ title }}</v-card-title>
      <v-card-text>{{ text }}</v-card-text>
      <BaseButton
         text="Select File"
         @clicked="selectFile"
         color="accent"
         icon="cloud_upload"
      />
      <input
        type="file"
        @change="onFilePicked"
        ref="fileInput"
        class="hideme"
        multiple
      >
      {{uploadedFileNames}}
      <v-flex xs10 class="text-xs-center">
      <v-progress-linear
        height="10"
        color="accent"
        :value="uploadProgress"
      ></v-progress-linear>
      </v-flex>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="accent" flat v-if="declineText"
          @click="clicked(false)">{{ declineText }}</v-btn>
        <v-btn color="accent" flat @click="clicked(true)">{{ confirmText }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

使用上面的代码，我得到以下显示：

我需要做的是在卡片中水平居中进度条。我已经在不同元素上玩过各种定心类，但我还没有能够让酒吧移动。如何使进度条水平居中？

标签： cssvuejs2progress-barvuetify.js

Answer 1

你为什么不瞄准那个栏并将其居中？

 .v-progress-linear {
    display: block;
    width: 100px;
    margin: 0 auto;
}

或者看起来你有一堂课可以做到这一点？class="text-xs-center"

如果是弹性容器：

main {
  display: flex;
  align-items: flex-start;
  background-color: gray;
  padding: 10px;
  width: 300px;
  height: 300px;
}

.v-progress-linear {
  display: block;
  margin: 0 auto;
  width: 100px;
  background-color: teal;
}

<main>
  <div class="v-progress-linear">
  hi
  </div>
</main>