如何将社交媒体处理到图标的右侧?

Question

对CSS工作很新，并试图找出如何做span的想法，这是作为社交媒体处理/标签与图标关联到社交媒体图标的右侧?我试图有手柄是在右边的图标，并在中心垂直，如果这是有意义的。我试着用浮动属性和跨度来玩，但这并没有多大帮助。我的代码笔是一个非常小的代码片段，其余的代码是为了实现我心中的小任务。我故意保持社交媒体图标垂直对齐。

.pic {
display: flex;
align-items: center;
width: 30px;
height: 30px;
}

<div>
<a href="https://www.facebook.com/joebiden/" >
<img class="pic" src="https://i.pinimg.com/originals/b7/63/69/b763699fd1fa3bfb374442593ae642e1.png"/> 
<span>Facebook Handle </span>
</a>
</div>

试图达到的结果:

https://sketchpad.pro/C0CB9461C3F00CC7BD9 p1, 0, 0, r0, s1

Answer 1

在装img和span两种物品的容器上应使用display: flex;和row方向。

下面是可以添加到样式表中的代码段

a {
display: flex;
flex-direction: row;
align-items: center;
}

Answer 2

不要在.pic类中使用flex，而是在<a>标签中使用它，因为<a>是<img />和<span>的父元素。

.pic {
width: 30px;
height: 30px;
}
a {
display: flex;
flex-direction: row;
align-items: center;
}

<div>
<a href="https://www.facebook.com/joebiden/" >
<img class="pic" src="https://i.pinimg.com/originals/b7/63/69/b763699fd1fa3bfb374442593ae642e1.png"/> 
<span>Facebook Handle </span>
</a>
</div>