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

回答

相關問題