Question

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

的justify-center

justify-content: center

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

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>

Answer 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"：

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

Codepen

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

Answer 2

<v-layout justify-center>
  <v-card-actions>
    <v-btn primary>
     <span>SignUp</span>
    </v-btn>`enter code here`
  </v-card-actions>
</v-layout>

Answer 3

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

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

将中心项目视为v-flex

3 个答案: