Css Vuetify.js：位置二<；v-flex>；元素集中在内部<；v型布局>；

我有一个

包含两个

元素：

<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>

搜索

现在，元素向左对齐。我希望它们能够居中对齐（如上图中的主图像和两个灰色按钮）。 如何做到这一点

当您使用2个

组件时，它们都会获得50%的

宽度

，虽然看起来它们是向左对齐的，但输入有一个

块

显示，按钮有一个

内联

显示，结果与您的屏幕截图类似

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

<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>