将按钮置于屏幕中央

Question

有两个按钮，我想将它们放在中间，但是它始终出现在图片的右侧。 我该如何解决这个问题？

Home.vue：

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-btn
          large
          router
          to="/viewRecipes"
          class="red accent-4 btn-style text-sm-right text-xs-center"
          >Explore Recipes</v-btn
        >
      </v-col>
      <v-col>
        <v-btn
          large
          router
          to="/createrecipe"
          class="red accent-4 btn-style text-sm-right text-xs-center"
          >create Recipes</v-btn
        >
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
.btn-style {
  color: aliceblue;
}
</style>

Answer 1

您的问题尚不清楚，但是您有两种选择要实现的目标：

1. 列中的中心按钮

<v-container>
    <v-row>
        <v-col class="text-center">
            <v-btn large 
                   router 
                   to="/viewRecipes" 
                   class="red accent-4">
                Explore Recipes
            </v-btn>
        </v-col>
        <v-col class="text-center">
            <v-btn large 
                   router 
                   to="/createrecipe" 
                   class="red accent-4">
                Create Recipes
            </v-btn>
        </v-col>
    </v-row>
</v-container>

1. 页面上的中心按钮。为此，您需要稍微修改布局并将按钮放在一列内

<v-container>
    <v-row>
        <v-col class="text-center">
            <v-btn large 
                   router 
                   to="/viewRecipes" 
                   class="red accent-4">
                Explore Recipes
            </v-btn>
            <v-btn large 
                   router 
                   to="/createrecipe" 
                   class="red accent-4">
                Create Recipes
            </v-btn>
        </v-col>
    </v-row>
</v-container>