如何实现网格布局内弹性容器中文本域（textarea）的单行文本垂直居中，且右侧按钮与文本域等高

嘿，我懂你现在的烦恼！想让网格里的flex容器内，textarea的单行文本垂直居中，还得让右边的按钮和它等高，确实容易卡壳。我看了你的代码，咱们稍微调整几个地方就能搞定：

首先，先把代码里的小错误和关键样式修正一下，直接看修改后的完整代码：

HTML #

<div class="document_grid">
  <div class="document_area_filters_global_display" id="document_area_filters_global_display_id"></div>
</div>

CSS #

/* Grid Layout */
.document_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px;
  grid-template-areas:
    "document_area_filters_global_display";
}

html,
body,
.document_grid {
  height: 100%;
  margin: 0;
}

.myFiltersGlobalDisplayWrap {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* 确保子元素高度一致 */
}

textarea.myFiltersGlobalDisplay {
  border: 1px solid grey; /* 修正原代码的空格错误 */
  resize: none;
  width: 100%;
  padding: 0 5px; /* 只保留左右内边距，上下内边距去掉 */
  overflow: hidden;
  box-sizing: border-box; /* 让边框内边距算在尺寸内 */
  height: 1.8em; /* 单行文本的高度，可根据字体大小调整 */
  line-height: 1.8em; /* 和height一致，实现文本垂直居中 */
  text-align: right;
}

.myFilterGlobalResetButton {
  border: 1px solid grey;
  border-left: none; /* 去掉左边框，和textarea衔接更自然 */
  height: 1.8em; /* 和textarea高度完全匹配 */
  margin: 0;
  padding: 0 0.8em;
  cursor: pointer;
}

JavaScript #

// Prepare Filters Global Display
const myDocumentAreaFiltersGlobalDisplay = document.getElementById("document_area_filters_global_display_id")

const myFiltersGlobalDisplayWrap = document.createElement("div");
myFiltersGlobalDisplayWrap.classList.add("myFiltersGlobalDisplayWrap");

const myFiltersGlobalDisplay = document.createElement("textarea");
myFiltersGlobalDisplay.classList.add("myFiltersGlobalDisplay");
myFiltersGlobalDisplay.value = "CENTER ME PLEASE";

const myFilterGlobalResetButton = document.createElement("button");
myFilterGlobalResetButton.classList.add("myFilterGlobalResetButton"); // 添加类名
myFilterGlobalResetButton.textContent = "X";

myFiltersGlobalDisplayWrap.appendChild(myFiltersGlobalDisplay);
myFiltersGlobalDisplayWrap.appendChild(myFilterGlobalResetButton);
myDocumentAreaFiltersGlobalDisplay.appendChild(myFiltersGlobalDisplayWrap);

关键修改点说明： #

• 修正语法错误：原代码里border: 1 px solid grey多了空格，改成1px才能让边框生效；
• textarea文本垂直居中：设置height和line-height为相同值，同时去掉上下内边距，这样单行文本就会自动垂直居中；
• 按钮与textarea等高：给按钮设置和textarea完全一致的高度，统一边框样式，去掉默认的边距内边距，还可以去掉按钮左边框，让两者视觉上更统一；
• 尺寸计算准确：给textarea添加box-sizing: border-box，确保边框和内边距不会额外撑开元素尺寸；
• flex容器对齐：用align-items: stretch作为双重保障，确保子元素高度完全一致。

这样调整后，你就能得到单行高度的textarea，文本垂直居中，右侧按钮和它完美等高啦！

备注：内容来源于stack exchange，提问作者Jörg