CSS - H1をスパン記号と整列する

Question

ウェブサイトのセクション見出しをスタイリングしていますが、スパンシンボルとH1見出しを適切に整列させることができません。これは、サイト上でどのように見えるかである - うるさく

、私は2つの要素が整列するように見えるこのスニペットのコードを含めるために来ているとき。私がコンソールをチェックすると、スパン要素にシンボルの周りにバッファがあるように見えますが、イメージの中で見ているように、ラインから少し外れています。私はサイトのブートストラップを使用していますが、これは私が紛失している隠れたルールかもしれませんか？

.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 { 
 
\t 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

をご確認ください。ただ、OPは、このようにすべてのスパンにスタイルを適用していない、 `.secthead H1、代わりに` .secthead H1の.secthead span`、span`を使用したいかもしれないこれに追加する

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