Vuetify 水平居中

Vuetify（Vue.js 的 Material Component Framework）提供了许多用于样式和布局的类。在本文中，我们将讨论如何在 Vuetify 中实现水平居中。

使用 Vuetify 的 text-center 类

Vuetify 提供了内置的布局类来实现水平居中。通过将text-center类添加到您的 HTML 元素中，您可以将该元素居中。

<template>
  <div class="text-center">
    <h1>Hello World</h1>
  </div>
</template>

<style>
/* 如果需要垂直居中，可以使用 .d-flex 和 .align-center*/
</style>

使用 Vuetify 的 justify-center 类

许多 Vuetify 组件具有justify-center类，它们也可以实现水平居中。

例如，在 Vuetify 中创建一个水平居中的页面布局：

<template>
  <v-container justify-center>
    <v-row>
      <v-col cols="12" md="8" offset-md="2">
        <v-card>
          <v-card-title>
            <span class="headline">Welcome to Vuetify</span>
          </v-card-title>
          <v-card-text>
            <p>
              This is vuetify example.
            </p>
          </v-card-text>
          <v-card-actions>
            <v-btn
              color="primary"
              text
            >
              Get Started
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

使用行内样式

如果您要为单个元素指定样式，则可以通过使用style属性将行内样式添加到该元素中来实现水平居中。

<template>
  <div style="text-align: center">
    <h1>Hello World</h1>
  </div>
</template>

结论

以上三种方法都可以在 Vuetify 中实现水平居中。 text-center类适合在组件中使用，justify-center类适用于页面布局。如果您只想在单个元素上使用样式，则可以使用行内样式。