web-dev-qa-db-ja.com

センター項目をv-flexにvuetify

<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>
flexboxvuejs2vuetify.js
24
Epitouille

<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 を参照してください

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