テキストと矢印を整列する（Googleフォントで）

Question

divの途中でテキストと右矢印（Googleフォントで）の両方を整列しようとしていますが、何を試しても成功できませんでした。どのように整列させることができますか？

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 

 
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;"> 
 
<div style="float:right;"> 
 
<span class="material-icons" style=" font-size:2rem;">&#xe315;</span> 
 
</div> 
 

 
<div style="padding-left:20px; padding-right:20px;"> 
 
Some Text 
 
</div> 
 

 
</div>

Answer 1

テキスト要素上margin-top: 7pxを設定し、または好ましくは、カウンタの容器（この場合、36px）、マイナス数ピクセルの高さに等しいline-heightを設定しますかアイコンの高さ

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 

 
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;"> 
 
<div style="float:right;"> 
 
<span class="material-icons" style=" font-size:2rem;">&#xe315;</span> 
 
</div> 
 

 
<div style="padding-left:20px; padding-right:20px; line-height: 34px;"> 
 
Some Text 
 
</div> 
 

 
</div>

・ホープ、このことができます：この例では、私は34pxで行ってきました！ :)

Answer 2

矢印の絶対位置指定とtop: 50%; transform: translateY(-50%);を使用すると、垂直方向の中央に配置できます。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block; position: relative;"> 
 
    <span class="material-icons" style=" font-size:2rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);">&#xe315;</span> 
 
    <div> 
 
    Some Text 
 
    </div> 
 
</div>