对齐文本和箭头（与谷歌字体）

Question

我想在div中间对齐文本和右箭头（与谷歌字体），但无论我尝试了什么，我都无法成功。他们如何对齐？

<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，或优选地，设置一个line-height等于容器的高度（在这种情况下，36px），减去几个像素来对抗图标的高度。在这个例子中，我已经有34像素：

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

希望这有助于！ :)

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>