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

嘿，这事儿很好搞定！你当前的布局只实现了垂直方向的居中（align-center是控制垂直对齐的），要让搜索框和按钮整体在水平方向居中，只需要调整<v-layout>的属性就行，具体改法如下：

核心修改要点 #

• 给<v-layout>添加justify-center属性：这是Vuetify flex布局里控制水平方向对齐的关键属性，加上它之后，容器内的子元素就会自动水平居中排列了。
• 移除<v-text-field>上的style="float:left"：flex布局下完全不需要用浮动来控制元素排列，这个样式反而会干扰flex的正常对齐逻辑，删掉就好。

修改后的完整代码 #

<v-layout row wrap align-center justify-center>
  <v-flex>
    <v-text-field value="search"></v-text-field>
  </v-flex>
  <v-flex>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>

额外小提示 #

如果想让搜索框和按钮的宽度更可控，或者调整它们之间的间距，还可以给<v-flex>加上Vuetify的宽度类，比如<v-flex xs4>，这样每个元素会占4份栅格宽度（总共12份），整体依然保持水平居中，你可以根据需求灵活调整~

内容的提问来源于stack exchange，提问作者Eerik Sven Puudist