css - 使多行文本与图像内联

Question

如何使多行文本 (a) 与图像 (img) 内联？

文本的第二行始终位于图像之后。

这是我的代码:

<div class="entry">
  <img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
  <a class="name">Waisie Milliams Hah Waisie Milliams Hah</a>
  <div class="num">0</div>
</div>

<style>
  .entry {
    background-color: rgb(37, 37, 37);
    color: white;
    height: auto;
    margin: 6.9px;
    bottom: 0px;
    box-sizing: border-box;
    left: 0px;
    letter-spacing: 0.3px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: left;
    text-decoration: none solid rgb(0, 0, 0);
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    top: 0px;
    width: 224px;
    column-rule-color: rgb(0, 0, 0);
    perspective-origin: 112px 200.188px;
    transform-origin: 112px 200.188px;
    caret-color: rgb(0, 0, 0);
    border: 0px none rgb(0, 0, 0);
    font-size: 15px;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    min-height: 220px;
  }
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .name {
    vertical-align: middle;
  }
  .num {
    text-align: center; 
    font-size: 112px;
  }
</style>

我试过在容器和两个 child 上弄乱 display 属性，但没有成功。

Answer 1

试试这个

<div class="entry">
  <div class="wrapper">
     <img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
     <a class="name">Waisie Milliams Hah Waisie Milliams Hah</a>
  </div>
   <div class="num">0</div>
</div>

CSS

.wrapper{
    display: flex;
    align-items: center;
    text-align: center;
}