vuetify将中心物品放入v-flex

我试图将<v-btn>置于<v-flex>中。由于<v-flex>是Flexbox的DIV，我用justify-center将其转化入vuetify将中心物品放入v-flex

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>

来源

2017-09-25 Epitouille

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

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

开发利用在他的例子。

来源

2017-09-25 13:25:11 Traxo

谢谢你的工作。但为什么？！ text-xs-center做一个'text-align：center'。为什么它不适用于Flexbox？ – Epitouille

@Epitouille如果你在包装上放了'd-flex'（'display：flex'），那么它会在按钮上包含'flex：1,1自动'，因为包含了CSS：'.d-flex> * {.. 。flex：1 1 auto; }'，这将使其全宽 – Traxo

-1

v-flex不具备显示屏的功能！在浏览器中检查v-flex，你会发现它只是一个简单的块div。

所以，你应该在你的HTML或CSS中用display: flex覆盖它，以使它与justify-content一起工作。

来源

2017-09-29 19:45:17 jundialwan

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

来源

2017-12-17 19:57:22 Abdulaziz

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

这里不需要说明。阅读文档：https：//vuetifyjs.com/layout/grid – Desprit

vuetify将中心物品放入v-flex

回答

相关问题