同じ行にさまざまなサイズのテキストが表示されます。上記の画像で示したよう

Question

（事実の通知を取らないしてくださいDasboardテキストがabhorrently大きい - 私はそれだけこの例では、そのサイズ製）、私は「管理者コントロールパネル」というテキストが欲しいです赤い矢印でオンラインでダッシュボードのテキストがある場所と水平方向の中央に整列させます。

Iテキストのこれらの部分の両方を持っているコードは、次のとおり

<div id="content-breadcrumb"> 
    Admin Control Panel &raquo; 
    <span id="active"> 
     Dashboard 
    </span> 
</div> 

CSSコードがある：私は無駄に垂直整列と設定ラインの高さを使用して試みた

#content-breadcrumb { 
    font-family: 'Varela Round', sans-serif 
    font-size: 16px; 
} 

#content-breadcrumb #active { 
    font-size: 200px; 
    color: #4F95C4; 
} 

注。あなたが提供できるどんな助けでもありがとう！あなたが達成するために、フレックスボックスとalign-itemsを使用することができます

Answer 1

この：

（PS：あなたのクロージングのdivとスパンタグが欠落している右のキャレット）

#content-breadcrumb { 
 
    display: flex; 
 
    align-items: center; 
 
    font-size: 1rem; 
 
} 
 
    
 
#active { 
 
    font-size: 2rem; 
 
} 
 

<div id="content-breadcrumb"> 
 
    Admin Control Panel &raquo; 
 
    <span id="active"> 
 
     Dashboard 
 
    </span> 
 
</div>

Answer 2

あなたはいけない場合あなたはvertical-align: middle;を使用することができますフレックスボックスを使用したい。

https://jsfiddle.net/yrduwpzm/

#content-breadcrumb { 
 
    font-family: 'Varela Round', sans-serif 
 
    font-size: 16px; 
 
} 
 

 
#content-breadcrumb #active { 
 
    font-size: 50px; 
 
    color: #4F95C4; 
 
    vertical-align: middle; 
 
}

<div id="content-breadcrumb"> 
 
    Admin Control Panel &raquo; 
 
    <span id="active"> 
 
     Dashboard 
 
    </span> 
 
</div>