html - 无法在 div 旁边添加文本

Question

我一直在尝试在图像旁边添加一些文本，但我无法让它工作，似乎“面孔”样式不允许我这样做，你知道哪里出了问题吗？ :)

我有:

<div class="teams-body" id="teams-body">
<div class="faces">
<img src="http://assets.lolesports.com/player/lourlo-iatd1lge.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit 
</div>
<div class="faces"> 
<img src="http://assets.lolesports.com/player/iwdominate-4kjr1rn6.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit 
</div>
<div class="faces">
<img src="http://assets.lolesports.com/player/fenix-6cyhqz7w.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit
</div>
</div>

CSS:

.faces {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;
}


.faces img {
    display: inline;
    height: 100%;
    width: 100%;
    background-color: #79b9e1;
    z-index: -1;
}

目前看起来像:

[img]

[img]

[img]

我希望它看起来像:

[img] Lorem ipsumdolor sit amet consectetur adipiscing elit Lorem ipsumdolor sit amet consectetur adipiscing elit
[img] Lorem ipsumdolor sit amet consectetur adipiscing elit Lorem ipsumdolor sit amet consectetur adipiscing elit

Answer 1

也许像这样？

如果您希望图像/文本垂直居中，请将 vertical-align: middle; 添加到 .faces img 规则

.faces {
  height: 100px;
  position: relative;
}


.faces img {
  height: 100%;
  width: auto;
  background-color: #79b9e1;
  border-radius: 50%;
}

<div class="teams-body" id="teams-body">
  <div class="faces">
    <img src="http://assets.lolesports.com/player/lourlo-iatd1lge.png">
    Lorem ipsumdolor sit amet consectetur adipiscing elit 
  </div>
  <div class="faces"> 
    <img src="http://assets.lolesports.com/player/iwdominate-4kjr1rn6.png">
    Lorem ipsumdolor sit amet consectetur adipiscing elit 
  </div>
  <div class="faces">
    <img src="http://assets.lolesports.com/player/fenix-6cyhqz7w.png">
    Lorem ipsumdolor sit amet consectetur adipiscing elit
  </div>
</div>