無法在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坐阿梅德consectetur adipiscing ELIT的Lorem ipsumdolor坐阿梅德consectetur adipiscing ELIT
[IMG]的Lorem ipsumdolor坐阿梅德consectetur adipiscing ELIT的Lorem ipsumdolor坐阿梅德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>

Answer 2

使用此代碼

.faces img { 
 
    display: inline; 
 
    background-color: #79b9e1; 
 
    z-index: -1; 
 
    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; 
 
    vertical-align:middle 
 
    
 
}

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