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>

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

我需要做的是将进度条在卡中水平居中。我在不同元素上玩过各种居中类，但是我还不能使标准移动。如何使进度条水平居中？

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>

Answer 2

您可以将v-layout标签与justify-center属性一起使用，以使事物垂直居中

<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>
      <v-layout justify-center > <!--THIS IS WHAT YOU NEED-->
      <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-layout> <!-- Ending Tag for that -->
      <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>

Answer 3

在进度栏周围的v-flex中，更改：

<v-flex xs10 class="text-xs-center">

到

<v-flex xs10 class="mx-auto">

这是围绕田地的“自动”水平边距，它使边距均匀分布（即，将其中的任何内容居中）。

Vuetify-在v卡中水平地将v进度线性居中

3 个答案: