如何实现内部Input与外部Button的垂直居中对齐？

我有如下基础布局结构：

<div class="container">
  <div class="input-container">
    <input type="text">
    <small>Some text</small>
  </div>
  <button>Click</button>
</div>

其中<input>和<small>是第三方库渲染的组件，没法对它们的样式做太多调整。我想实现内部Input元素与外部Button元素的垂直居中对齐，试过Flex和Grid布局但都没成功。

以下是我用Vuetify组件的实际代码：

<div class="emails-dataset-actions-container">
  <v-text-field
    v-model="searchedDatasetName"
    class="right-gap name-filter-field inline-middle"
    variant="outlined"
    color="primary"
    density="compact"
    :placeholder="$t('filter')"
    @input="onNameFilterInput"
  />
  <v-btn
    class="create-dataset-button"
    style="box-shadow: none"
    color="primary"
    variant="outlined"
    @click="() => openEmailsDatasetEditor()"
    rounded
  >
    <v-icon
      size="17"
      start
    >
      fas fa-plus
    </v-icon>
    {{ $t("emailsDatasets.create") }}
  </v-btn>
</div>

.emails-dataset-actions-container {
  display: grid;
  grid-template-areas: "input button";
  width: 550px;
}

.name-filter-field {
  grid-area: input;
  width: 250px;
}

.create-dataset-button {
  grid-area: button;
}

目前Input和Button没有垂直居中对齐。

针对Vuetify组件的特性，试试下面几种方法：

方法1：给Grid容器加垂直对齐属性 #

修改容器的CSS，添加align-items: center，Grid布局下这个属性能让网格项在垂直方向上居中：

.emails-dataset-actions-container {
  display: grid;
  grid-template-areas: "input button";
  grid-template-columns: 250px auto; /* 明确列宽，避免自适应问题 */
  width: 550px;
  align-items: center; /* 关键属性 */
  gap: 16px; /* 可选，给两个元素加间距 */
}

方法2：改用Flex布局并调整对齐 #

如果Grid没生效，换成Flex布局，同样设置垂直居中：

.emails-dataset-actions-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  width: 550px;
  gap: 16px;
}

.name-filter-field {
  width: 250px;
  flex-shrink: 0; /* 防止输入框被压缩 */
}

方法3：针对Vuetify组件的特殊调整 #

要是上面的方法还是不行，可能是v-text-field内部的padding/margin让容器高度偏高，可以给输入框和按钮单独设置垂直对齐：

.name-filter-field {
  grid-area: input;
  width: 250px;
  align-self: center; /* 强制输入框在网格中垂直居中 */
}

.create-dataset-button {
  grid-area: button;
  align-self: center; /* 按钮也强制居中 */
}

另外，Vuetify的v-text-field用outlined变体时，默认高度可能和按钮不匹配，你可以给v-btn加上density="compact"，让两者高度更接近，再配合容器的居中对齐，效果会更好：

<v-btn
  class="create-dataset-button"
  style="box-shadow: none"
  color="primary"
  variant="outlined"
  @click="() => openEmailsDatasetEditor()"
  rounded
  density="compact" <!-- 添加这个属性 -->
>
  <v-icon size="17" start>fas fa-plus</v-icon>
  {{ $t("emailsDatasets.create") }}
</v-btn>

内容的提问来源于stack exchange，提问作者Djaballah DJEDID