Css 使多行文本与图像内联

如何使多行文本（

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>

哇！哇！哇！哇！哇
0
.进入{
背景色：rgb（37,37,37）；
颜色：白色；
高度：自动；
利润率：6.9px；
底部：0px；
框大小：边框框；
左：0px；
字母间距：0.3px；
溢出包装：断开单词；
位置：相对位置；
右：0px；
文本对齐：左对齐；
文本装饰：非实心rgb（0,0,0）；
文本呈现：优化易读性；
文本大小调整：100%；
顶部：0px；
宽度：224px；
列规则颜色：rgb（0,0,0）；
透视原点：112px200.188px；
变换原点：112px200.188px；
插入符号颜色：rgb（0,0,0）；
边框：0px无rgb（0,0,0）；
字体大小：15px；
列表样式：无外无；
轮廓：rgb（255、255、255）无0px；
最小高度：220px；
}
.图标{
宽度：50px；
高度：50px；
边界半径：50%；
垂直对齐：中间对齐；
}
.姓名{
垂直对齐：中间对齐；
}
纳姆先生{
文本对齐：居中；
字体大小：112px；
}

我试过在容器和两个孩子身上乱搞

显示
属性，但运气不好。
试试这个

<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>

您可以在不更改HTML结构的情况下使用以下代码，请访问以下网址查看演示：


内联图像文本将在这里，它可以是多行的
0
.进入{
背景色：rgb（37,37,37）；
颜色：白色；
最大宽度：350px；
填充：10px；
}
.entry.icon{
宽度：80px；
浮动：左；
边界半径：50%；
}
.条目.名称{
左边距：100px；
显示：块；
填充顶部：10px；
}
纳姆先生{
明确：两者皆有；
文本对齐：居中；
字体大小：100px；
}
我只更新了你的CSS。这是你的电话号码

编辑css并包括：
.图标{
宽度：80px；
清除：左；
浮动：左；
边界半径：50%；
}
.姓名{
清楚:对,；
浮动：对；
左边距：10px；
填充顶部：10px；
}
纳姆先生{
明确：两者皆有；
浮动：无；
文本对齐：居中；
字体大小：100px；
}
float：图像左侧（问题更新），更改
.num
元素的位置，使其不再处于中心位置。我已更新了原始问题的更多细节。添加
显示：flex
使
.num
元素消失。好的，然后从.entry类中删除flex，并在代码中添加我更新的html…这非常有效。有没有一种方法可以在不知道文本有多少行的情况下将文本垂直居中<代码>垂直对齐：中间
似乎没有任何变化是的，你可以，我根据你的要求更新了我的代码检查一次，如果工作正常，接受我的答案；D
.wrapper{
    display: flex;
    align-items: center;
    text-align: center;
}

<div class="entry">
    <img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
    <a class="name">Inline image text will be here and it can be multi-lined</a>
    <div class="num">0</div>
</div>

<style>
.entry {
  background-color: rgb(37, 37, 37);
  color: white;
  max-width: 350px;
  padding: 10px;
}

.entry .icon {
  width: 80px;
  float: left;
  border-radius: 50%;
}

.entry .name {
  margin-left: 100px;
  display:block;
  padding-top: 10px;
}

.num {
  clear: both;
  text-align: center;
  font-size: 100px;
}
<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;
    display:flex;
    flex-wrap:wrap;
    padding: 10px;
    align-items:center;
  }
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .name {
    vertical-align: middle;
    width: calc(100% - 60px);
    padding-left:10px;
  }
  .num {
    text-align: center; 
    font-size: 112px;
  }

Edit the css and include:
<style>
   .icon {
      width: 80px;
      clear: left;
      float: left;
      border-radius: 50%;
   }

   .name {
       clear: right;
       float: right;
       margin-left: 10px;
       padding-top: 10px;
   }

   .num {
       clear: both;
       float: none;
       text-align: center;
       font-size: 100px;
   }
<style>