如何实现固定页脚内不同高度元素的垂直居中对齐？

嘿，我来帮你搞定这个固定页脚里按钮和文本垂直居中的问题！你的HTML结构已经很清晰了，只需要调整CSS就能轻松实现需求，用Flexbox布局是最简洁靠谱的方式，兼容性也拉满～

先看你的HTML结构（不用修改，保持原样就行）：

<div class="footer">
  <div class="co_footer_content">
    <button class="func_button">
      <span class="func_button_ico"></span>
    </button>
    <p class="footer_txt">Small one liner {{varContent}}</p>
  </div>
</div>

接下来是修改后的CSS代码，我会标注关键属性的作用：

.footer {
  height: 87px;
  position: fixed;
  bottom: 0;
  width: 100%;
  /* 加个背景色方便直观看到页脚范围，可根据需求调整 */
  background-color: #f5f5f5;
  /* 盒模型设置，避免内边距撑大容器宽度 */
  box-sizing: border-box;
  /* 可选：给页脚加左右内边距，让内容不贴边 */
  padding: 0 20px;
}

.co_footer_content {
  /* 核心：启用Flex布局 */
  display: flex;
  /* 关键：让子元素在垂直方向（交叉轴）居中 */
  align-items: center;
  /* 让容器高度撑满页脚的高度，确保居中范围正确 */
  height: 100%;
  /* 可选：调整水平方向的布局，比如让按钮和文本分别靠两端 */
  justify-content: space-between;
  /* 如果想要按钮和文本之间有固定间距，可以用gap替代justify-content */
  /* gap: 20px; */
}

/* 可选：清除按钮默认样式，避免影响布局 */
.func_button {
  border: none;
  background: transparent;
  /* 给按钮设置尺寸，方便看到效果 */
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.footer_txt {
  /* 去掉p标签默认的上下外边距，防止破坏垂直居中的效果 */
  margin: 0;
}

原理说明： #

Flexbox布局的align-items: center属性会让容器内的所有子元素在垂直方向上居中对齐，配合height: 100%让co_footer_content容器完全填满页脚的高度，这样按钮和单行文本就能完美垂直居中啦～你可以根据实际需求调整justify-content或者gap来控制水平方向的间距，灵活度很高。

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