Vue-Typed-JS（Nuxt，Vuetify）。无法将内容居中

Question

我目前正在使用 Nuxt 和 Vuetify 构建 PWA，并且我正在使用 vue-typed-js 进行打字动画。

https://github.com/Orlandster/vue-typed-js#default-import

但是，我正在努力使输入的内容在中心对齐。

<template>
  <div>
    <div class="text-center justify-center d-flex flex-column min-vh-100">
      <h1>Hello!</h1>
      <vue-typed-js 
      :strings="['Im Barra, <b><span>UX Designer</span></b> and <b><span>Researcher</span></b> &#128075;']" 
      :showCursor="false" 
      :typeSpeed="75">
        <p class="typing"></p>
      </vue-typed-js>
      <transition name="scroll" appear>
        <div class="scrolldown-wrapper" v-if="show">
          <div class="scrolldown">
            <svg height="30" width="10">
              <circle class="scrolldown-p1" cx="5" cy="15" r="2" />
              <circle class="scrolldown-p2" cx="5" cy="15" r="2" />
            </svg>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

我的H1标签对齐正确，但是vue-typed-js的内容还是在页面左边对齐。

我附上了一张显示其显示方式的屏幕截图。如果我从浏览器 css 中禁用“display: flex”道具，我会得到想要的结果。但是我不确定如何在我的 nuxt 应用程序中实际覆盖它。

关于如何使内容居中的任何想法？

谢谢！

Answer 1

您可以将 v-row 与 justify="center" 和 align="center" 一起使用：

<template>
  <div>
    <div class="text-center justify-center d-flex flex-column min-vh-100">
      <h1>Hello!</h1>
      <v-row align="center" justify="center">
        <vue-typed-js 
        :strings="['Im Barra, <b><span>UX Designer</span></b> and <b><span>Researcher</span></b> &#128075;']" 
        :showCursor="false" 
        :typeSpeed="75">
          <p class="typing"></p>
        </vue-typed-js>
      </v-row>
      <transition name="scroll" appear>
        <div class="scrolldown-wrapper" v-if="show">
          <div class="scrolldown">
            <svg height="30" width="10">
              <circle class="scrolldown-p1" cx="5" cy="15" r="2" />
              <circle class="scrolldown-p2" cx="5" cy="15" r="2" />
            </svg>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>