CSS-将H1与跨度符号对齐

Question

I'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -

Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?

 .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

Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..

 .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

You could use a height and line-height.

 .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>