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>

Answer 2

您可以使用高度和行高。

.secthead span {

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

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

.secthead h1, .secthead span {
  height: 92px;
  display: inline-block;
  vertical-align:top;
  height: 92px;
}

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