行高不同且设overflow:hidden的内联元素垂直对齐问题

我来帮你搞定这个垂直对齐的坑！从你给出的代码来看，问题主要出在不同元素的行高不统一，加上inline-block元素的默认对齐规则，才导致了错位。下面给你两种靠谱的解决方案：

方案一：统一行高 + 显式垂直对齐 #

这种方法适合坚持用inline/inline-block布局的场景，核心是让需要对齐的元素拥有相同的行高，再配合vertical-align: middle来确保对齐：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.mybutton {
  display: inline-block;
  position: relative;
  line-height: 36px;
  vertical-align: middle;
  text-align: center;
  padding: 0 16px; /* 给按钮加个内边距，更符合实际使用场景 */
  border: 1px solid #ddd; /* 加边框方便查看对齐效果 */
  background: transparent;
  overflow: hidden; /* 加上你提到的overflow:hidden属性 */
}

span {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  text-decoration: underline;
  line-height: 36px; /* 和按钮统一行高，消除对齐偏差 */
  vertical-align: middle; /* 显式指定垂直对齐方式 */
}
</style>

<!-- 测试用例 -->
<button class="mybutton">提交</button>
<span>查看详情</span>

为什么这样有效？ #

inline-block元素默认是基于**基线（baseline）**对齐的，而基线的位置和元素的行高密切相关。当两个元素行高不同时，基线位置会偏移，导致视觉上的错位。统一行高后，基线位置一致，再加上vertical-align: middle，就能让元素的垂直中心对齐。

方案二：用Flexbox布局（更现代、更省心） #

如果不需要兼容非常老旧的浏览器，Flexbox是解决垂直对齐问题的最优解，它能完全忽略行高的影响，直接实现精准对齐：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
/* 用容器包裹需要对齐的元素 */
.alignment-container {
  display: flex;
  align-items: center; /* 核心：让子元素垂直居中 */
  gap: 10px; /* 元素之间的间距，可选 */
}

.mybutton {
  line-height: 36px;
  padding: 0 16px;
  border: 1px solid #ddd;
  background: transparent;
  overflow: hidden;
}

span {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  text-decoration: underline;
}
</style>

<!-- 测试用例 -->
<div class="alignment-container">
  <button class="mybutton">提交</button>
  <span>查看详情</span>
</div>

为什么推荐这个？ #

Flexbox的align-items: center会自动让所有子元素在交叉轴（这里是垂直方向）上居中，不管子元素的行高、尺寸差异有多大，都能完美对齐。而且代码更简洁，不需要纠结行高和对齐属性的细节。

额外提示：处理overflow:hidden的内部元素 #

如果你的.mybutton内部有超出容器的元素（比如图标、文本），可以给按钮内部也用Flex布局来确保内容垂直居中：

.mybutton {
  /* 原有样式 */
  display: inline-flex; /* 改成inline-flex */
  align-items: center;
  justify-content: center;
}

这样即使内部元素设置了overflow:hidden，也不会影响整体的垂直对齐效果。

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