Vuetify - 无法在 v-card-title 内将 v-image 和 video-text 完全居中对齐

Posted 2023-03-05

【中文标题】Vuetify - 无法在 v-card-title 内将 v-image 和 video-text 完全居中对齐

【英文标题】：Veutify - cannot align v-img and v-text perfectly centered one top of the other inside v-card-title

【发布时间】：2021-12-10 01:04:04

【问题描述】：

对于登录组件，我正在尝试将图像和文本与v-card-title 内的文本上方的图像完美居中。

这是它的样子：

如您所见，它们彼此之间并没有完美的中心对齐。我尝试了很多不同的方法来实现这一点，但都没有奏效。

代码如下：

<v-card-title class="aca-login-title">
  <div class="text-xs-center">
    <v-flex xs12 md12 lg12>
      <v-img mx-auto max- class="login-avatar" src="imgUrl"/>
      <v-text style="color:#565656">Some Title Here</v-text>
    </v-flex>
  </div>
</v-card-title>

<div class="text-xs-center"> 是在另一个答案中提出的，虽然它正确对齐了图像，但它不适用于文本。

我还从另一个建议中添加了mx-auto，但它也没有解决问题。

我对 Vuetify 布局/类比较陌生，所以如果这是一件简单的事情，请原谅我。非常感谢任何有关如何做到这一点的指导。

【参考方案1】：

您可以将元素与 flexbox 辅助类 d-flex 和 flex-column 对齐。您可以在Vuetify's documentation 中阅读更多相关信息。

在你的情况下，它看起来像这样：

<v-card-title class="aca-login-title d-flex flex-column">
  <v-img
    max-
    class="login-avatar"
    src="imgUrl"
  />
  <v-text style="color:#565656">Some Title Here</v-text>
</v-card-title>

我删除了 div 和 v-flex 元素，因为它们不是实现所需结果所必需的。