vuetify 中心项目到 v-flex

Posted 2023-02-16

【中文标题】vuetify 中心项目到 v-flex

【英文标题】：vuetify center items into v-flex

【发布时间】：2018-03-06 09:41:56

【问题描述】：

我正在尝试将 <v-btn> 居中到 <v-flex>。由于<v-flex> 是一个flexbox div，我使用justify-center 转换为

justify-content: center

由于我的方向是水平的，我的按钮应该居中对齐，但事实并非如此。这是重现我的问题的代码笔。

https://codepen.io/anon/pen/ZXLzex

我想注册按钮在 div 内居中 (v-flex)。

这里是完整的代码：

 <v-card>
    <v-card-text >
          <v-text-field label="Email"></v-text-field>
          <v-text-field label="Password"></v-text-field>
    </v-card-text>

    <v-card-actions>
        <v-layout row>
          <v-flex justify-center>
            <v-btn primary>
              Signup
            </v-btn>
          </v-flex>
        </v-layout>
    </v-card-actions>
  </v-card>

【参考方案1】：

在<div class="text-xs-center">内包裹按钮

<div class="text-xs-center">
  <v-btn primary>
    Signup
  </v-btn>
</div>

Dev 在他的示例中使用它。

---

对于v-card-actions 中的居中按钮，我们可以添加class="justify-center"（注意在v2 类中是text-center（所以没有xs）：

<v-card-actions class="justify-center">
  <v-btn>
    Signup
  </v-btn>
</v-card-actions>

Codepen

---

有关居中的更多示例，请参阅here

【讨论】：

感谢您的工作。但为什么 ？！ text-xs-center 执行text-align: center。为什么它不适用于 flexbox？

@Epitouille 如果您将d-flex (display:flex) 放在包装器上，那么它将在按钮上包含flex: 1, 1 auto，因为包含css：.d-flex > * ... flex: 1 1 auto; ，这将使其成为全宽跨度>

我必须添加作用域样式 .v-card__actions display: inline; ，以便将按钮正确居中在此建议解决方案旁边的 v-card-actions 元素上。

@RakibulHaq 我们可以使用<v-card-actions class="justify-center">。见编辑。

@Traxo 是的！我已经摆脱了 css 的作用域，并将 only justify-center 添加到 v-card-actions 并且它 works 。谢谢大哥！

【参考方案2】：

<v-layout justify-center>
  <v-card-actions>
    <v-btn primary>
     <span>SignUp</span>
    </v-btn>
  </v-card-actions>
</v-layout>

【讨论】：

请解释这段代码的工作原理以及它与其他答案的不同之处。

【参考方案3】：

v-flex 没有显示弹性！ 在浏览器中查看 v-flex ，你会发现它只是一个简单的块 div。

因此，您应该在 html 或 CSS 中使用 display: flex 覆盖它，以使其与 justify-content 一起使用。