html - CSS - 将 H1 与跨度符号对齐

Question

我正在为一个网站设置部分标题的样式，但我无法完全正确对齐跨度符号和 H1 标题。这是它在网站上的样子 -

令人讨厌的是，当我将代码包含在此片段中时，这两个元素似乎是对齐的。当我检查控制台时，span 元素似乎在符号周围有一个缓冲区，提示它略微不正常，正如您在图像中看到的那样。我正在为网站使用 Bootstrap ，这可能是我遗漏的隐藏规则吗？

.secthead span {

  font-weight: bolder;
  font-size: 80px;
  font-family: 'Gotham-Medium', sans-serif;
}

.secthead h1 {
 
  font-size: 50px;
 font-family: 'Gotham-Medium', sans-serif;
  color: #000;
  text-align: left;
  padding: 0 0 20px 20px;
  
}

.secthead h1, span {
	display: inline-block;
}

<div class="secthead"><span style="color: rgb(255,128,55);">&#43;</span><h1>Who We Are</h1></div>

Answer 1

只需在两个标签中使用 vertical-align: middle; 并从 h1 标签的底部移除填充。检查下面更新的代码段..

.secthead span {
  font-weight: bolder;
  font-size: 80px;
  font-family: 'Gotham-Medium', sans-serif;
}

.secthead h1 {     
  font-size: 50px;
  font-family: 'Gotham-Medium', sans-serif;
  color: #000;
  text-align: left;
  padding: 0 0 0px 20px;      
}

.secthead h1, span {
  display: inline-block;
  vertical-align: middle;
}

<div class="secthead"><span style="color: rgb(255,128,55);">&#43;</span><h1>Who We Are</h1></div>