vuetify中的中间浮动按钮

Question

我试图将“立即购买”按钮置于屏幕中间，但无法正常工作。

我创建了3个flex项目并将按钮添加到中间flex。但是，这也不起作用。

我尝试过使用justify-space-around和justify-space-between，但是没有运气。

<v-flex xs12>
  <v-layout row >
    <v-flex ></v-flex>
    <v-flex pt-2>
      <v-card>
          <v-btn
            color="pink"
            dark
            absolute
            top
          >
            BUY NOW
          </v-btn>
      </v-card>
    </v-flex>
    <v-flex ></v-flex>
  </v-layout>
</v-flex>

这里是codepen

的链接

请帮助。

我需要将按钮精确地定位在中间，如下所示：

Answer 1

您可以使用text-xs-center类将按钮水平居中。

<v-card class="text-xs-center">
    <v-btn
      color="pink"
      dark
      absolute
      top
    > buy now </v-btn>
</v-card>

Answer 2

https://codepen.io/anon/pen/Ygrrox

我将按钮移动到带标题的Flexbox上方的另一个Flexbox中。 text-xs-center水平移动文本，align-center垂直移动文本。您可以在Codepen中看到我的更改：）

<v-flex text-xs-center align-center>
    <v-btn
        color="pink"
        dark
        absolute
    > buy now
</v-flex>