css - Vuetify.js:将两个 元素放在 的中央

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

您可以将这两个元素包装在另一个 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>