如何垂直对齐高度大于旁边文本的双箭头 (»)？

Question

我想对齐一个大的双箭头»，它的大小为3rem，所以它与旁边的文本在一行(1.5rem大小(。我试着将其与边距和填充对齐。但这并不能改变任何事情。

这是我的代码

.box {
background-color: #333333;
color: #ffffff;
padding: 20px;
width: 300px;
text-align: center;
font-size: 1.5rem;
font-family: Verdana;
border-radius: 30px;
}
.arrow {
font-size: 3rem;
line-height: 0;
}

<div class="box">
My Text <span class="arrow">&raquo</span>
</div>

Answer 1

也许是这样的：

.box {
background-color: #333333;
color: #ffffff;
padding: 20px;
width: 300px;
text-align: center;
font-size: 1.5rem;
font-family: Verdana;
border-radius: 30px;
display: flex;
align-items: center;
}
.arrow {
font-size: 3rem;
line-height: 0;
margin-bottom: 5px;
}

<div class="box">
My Text <span class="arrow">&raquo</span>
</div>

Answer 2

只需将position: relative应用于图标并根据需要定位即可。

我所做的只是向图标添加position:relative和top: 0.5rem，这样做的目的是设置其相对于页面流中正常位置的位置。

.box {
background-color: #333333;
color: #ffffff;
padding: 20px;
width: 300px;
text-align: center;
font-size: 1.5rem;
font-family: Verdana;
border-radius: 30px;

}
.arrow {
font-size: 3rem;
line-height: 0;
position: relative;
top: 0.5rem
}

<div class="box">
My Text <span class="arrow">&raquo</span>
</div>

Answer 3

将position:relative添加到图标可能会对您有所帮助。。

.box {
background-color: #333333;
color: #ffffff;
padding: 20px;
width: 300px;
text-align: center;
font-size: 1.5rem;
font-family: Verdana;
border-radius: 30px;
}
.arrow {
position:relative;
top:5px;
font-size: 3rem;
line-height: 0;
}

<div class="box">
My Text <span class="arrow">&raquo</span>
</div>