Question

我的<v-layout>包含两个<v-flex>元素：

<v-layout row wrap align-center>
  <v-flex>
    <v-text-field
      value="search"
      style="float:left">
    </v-text-field>
  </v-flex>
  <v-flex>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>

现在元素与左like this对齐。我希望它们在中央对齐（作为主图像和上面链接的图片中的两个灰色按钮）。怎么做到这一点？

Answer 1

当您使用2个<v-flex>组件时，它们都会得到50％width，虽然它们看起来像是左对齐但输入有block显示和按钮有一个inline显示，结果就像截图一样。

另一种方法是添加响应类，如：

<v-layout>
  <v-flex xs11>
    <v-text-field
      value="search"
      style="float:left">
    </v-text-field>
  </v-flex>
  <v-flex xs1>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>

Answer 2

您可以将这两个元素包装在另一个.exe中，并使用v-layout > v-flex指令添加左右填充（构建在@kiarashws示例之上）：

offset-

Vuetify.js：在<v-layout>中集中放置两个<v-flex>元素

2 个答案: