文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将社交媒体句柄放在图标的右侧？

问如何将社交媒体句柄放在图标的右侧？
EN

Stack Overflow用户

提问于 2021-01-22 15:17:08

回答 2查看 35关注 0票数 0

我刚开始使用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

html

css

回答 2

Stack Overflow用户

发布于 2021-01-22 15:28:35

您应该在两个项目(img和span)的容器上使用带有row方向的display: flex;。

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

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

票数 0

Stack Overflow用户

发布于 2021-01-22 15:39:41

不要在.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65840816

复制

相似问题

问如何将社交媒体句柄放在图标的右侧？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将社交媒体句柄放在图标的右侧？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将社交媒体句柄放在图标的右侧？
EN