如何将CSS三角形与文本垂直对齐？

云原生阿岚

2026-5-21

实现CSS三角形与文本的垂直对齐

嘿，这个问题其实很好解决！关键在于利用CSS的vertical-align属性来调整三角形（通过border绘制的行内元素）和文本的垂直位置。下面我给你详细拆解实现思路和完整代码：

核心原理

用border绘制的CSS三角形本质是行内/行内块元素，默认的垂直对齐基准（baseline）往往和文本的视觉中心不匹配，所以我们可以通过vertical-align属性指定对齐方式，比如middle、top、bottom或者具体像素值，就能让三角形和文本完美对齐。

完整代码示例

<style>
div { 
  margin: 10px;
  /* 可选：给文本设置行高，让对齐效果更稳定 */
  line-height: 1.5;
} 

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  /* 让箭头与文本中心对齐 */
  vertical-align: middle;
  /* 可选：添加间距，避免箭头和文本挤在一起 */
  margin-right: 4px;
} 

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid red;
  /* 同样用middle实现中心对齐 */
  vertical-align: middle;
  margin-right: 4px;
}
</style>

<div>
  <span class="arrow-up"></span> An up arrow
</div>
<div>
  <span class="arrow-down"></span> A down arrow
</div>