如何垂直对齐 v-text-field 和 v-select 组件内的项目

Question

我的 Vue 应用程序中有一个工具栏。经过长时间的会议后，我最终完成了它，但我仍然遇到对齐项目的普遍问题，特别是在 v-text-field 和 v-select 组件内。问题是我尝试了不同的选项，但我觉得有什么问题或者我根本不理解 vuetify。以下是问题列表：

\n

1-select 的内部项目和 v-text-field 内的搜索图标与其父项的底部对齐。如何将其垂直对齐到中心？

\n

2-我为搜索栏设置了最大宽度，但其父项不受此影响。因此，它后面的文本 (Detayli Arama) 无法紧挨着它对齐。

\n

\n

代码是：

\n

<v-text-field\n      hide-details\n      height="30px"\n      outlined\n      dense\n      single-line\n      append-icon="search"\n      class="ml-12"\n      placeholder="Kelime, ilan no veya ma\xc4\x9faza ad\xc4\xb1 ile ara"\n    ></v-text-field>\n    <a target="_blank" href @click.stop v-on="on">\n      <h5 class="subheading primary--text">Detayl\xc4\xb1 Arama</h5>\n    </a>\n\n    <v-spacer></v-spacer>\n    <a target="_blank" href @click.stop v-on="on">\n      <v-icon small left color="grey darken-2">email</v-icon>\n    </a>\n    <a target="_blank" href @click.stop v-on="on">\n      <v-icon left small color="grey darken-2">notifications</v-icon>\n    </a>\n    <a target="_blank" href @click.stop v-on="on">\n      <v-icon left small color="grey darken-2">star</v-icon>\n    </a>\n\n    <v-select\n      v-model="userSelect"\n      :items="items"\n      height="30px"\n      label="Kullan\xc4\xb1c\xc4\xb1"\n      outlined\n      dense\n      hide-details\n      left\n      single-line\n      class="shrink"\n      style="max-width:220px"\n    ></v-select>\n

\n

样式在 main.css 中处理

\n

.v-text-field .v-input__control .v-input__slot {\n  font-size: 13px;\n  letter-spacing: normal;\n  text-align: left;\n  min-height: 10px !important;\n}\n\n.v-input__control {\n  max-width: 300px;\n}\n\n.v-select {\n  font-size: 13px;\n}\n

\n