html - 如何让社交媒体句柄位于图标的右侧？

Question

使用 CSS 很新，并试图弄清楚如何做才能拥有跨度，它充当与社交媒体图标相关联的社交媒体句柄/标签，位于社交媒体图标的右侧？我试图让手柄位于图标的右侧，并且如果有意义的话，也可以垂直居中。我尝试使用 span 使用 float 属性，但这并没有太大帮助。我的代码笔是其余代码的一小段，目的是为了完成我想到的小任务。我故意保持社交媒体图标垂直对齐。

.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

标签： htmlcss

Answer 1

不要flex在.pic类中使用，而是在<a>标签内使用它，因为它是and<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>