如何并排获取图标内的图像和文本？答案

【问题标题】：How to get an image and text inside a icon side by side?如何并排获取图标内的图像和文本？
【发布时间】：2021-10-28 04:29:00
【问题描述】：

我想在一个图标中并排获得一个小的 png 图像和一些文本，如何实现它目前是垂直的？ This is the order I currently have want to get the two along side instead of this 划分本身是不同的，因为它们位于此消息内容类中的不同子类中。

【问题讨论】：

请添加您当前的代码。

标签： javascript css frontend

【解决方案1】：

使用 CSS 弹性框。示例代码：

.image-wrapper{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  background:#eee;
  padding:1rem 2rem;
  border-radius:1rem;
}

.image-wrapper img{
  height:2rem;
  margin-right:1rem;
 }
 
.image-wrapper p{
  font-size:1.8rem;
 }

<div class="image-wrapper">
  <img src = "https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" alt="logo"/>
  <p>Some random text</p>
</div>

参考这里了解更多关于 CSS flexbox link

【讨论】：

为什么不把它放在一个可运行的 sn-p 中来展示这个例子呢？（我没有反对，只是一个建议）使用编辑器上的<> 图标。
感谢@PaulT。为了这个想法。我也做过。