vuetify - 如何在 v-col 中居中元素答案

【问题标题】：vuetify - how to center an element inside v-colvuetify - 如何在 v-col 中居中元素
【发布时间】：2020-08-30 13:43:11
【问题描述】：

近一个小时以来，我一直在试图弄清楚如何在 v-col 中居中放置一个元素我找不到合适的解决方案。

我试图通过将 justify-content 放在 v-col 中来使 a 元素居中，但它只是保持不变在那里，不会动。

<v-row v-if="hideFullDetail">
    <v-col cols="12" md="9" style="justify-content: center;">
      <a @click="displayFullDetail = !displayFullDetail">view more</a>
    </v-col>
</v-row>

【问题讨论】：

text-align: center 工作吗？

标签： html css vuetify.js

【解决方案1】：

text-align: center 是此用例的特定属性。如果它是块级元素，则适用于父级或子级自身。

【讨论】：

【解决方案2】：

使用这个：

text-align: center;

（这并不特定于 v-col）。

详情见https://www.w3schools.com/cssref/pr_text_text-align.ASP

【讨论】：