Vuetify.js:将两个 <v-flex> 元素放在 <v-layout> 的中央

Vuetify.js: Position two <v-flex> elements centrally inside <v-layout>

我有一个 <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。我希望它们居中对齐(如上面链接图片中的主图像和两个灰色按钮)。 如何做到这一点?

当您使用 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>

您可以将两个元素包装在另一个 v-layout > v-flex 中并使用 offset- 指令添加左右填充(在 @kiarashws 示例之上构建):

  <v-layout>
    <v-flex xs12 sm8 offset-sm2>
      <v-layout>
        <v-flex xs11>
          <v-text-field
          value="search"
          style="float:left">
          </v-text-field>
        </v-flex>
        <v-flex xs1>
          <v-btn color="primary"><v-icon>search</v-icon></v-btn>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>