对齐文本中间图像多行

Question

我这里有一个代码：

<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" /> 
 
<span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span> 
 
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span> 
 
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span>

我想是有他自己的路线每一区间，更确切地说有跨度下跨度。我试过<br>或

style="display:block" 

但把我的文字放在图像下。

Answer 1

这将是完整的HTML代码

<div style="float:left;width:50%"> 
<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" /> 
</div> 
<div style="float:left;width:50%"> 
<span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span><br/> 
     <span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span><br/> 
     <span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span> 
</div> 

请根据您的要求调整宽度。

Answer 2

简单的解决办法是包装所有跨在一个.wrapper像这样

.wrapper { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.wrapper > span { 
 
    display: block; 
 
}

<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" /> 
 
    <div class="wrapper"> 
 
    <span class="username no-margin-bottom">AXXX</span> 
 
    <span class="secondary-text no-margin-bottom">Tsad </span> 
 
    <span class="secondary-text no-margin-bottom">zxzxxz </span> 
 
    </div>

Answer 3

包装你的跨度在一个容器...

jsfiddle

.span-container { 
 
    display: inline-block; 
 
} 
 

 
.span-container span { 
 
    display: block; 
 
}

<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" /> 
 
<div class="span-container"> 
 
    <span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span> 
 
    <span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span> 
 
    <span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span> 
 
</div>

Answer 4

我把你的3 spans一个div内，然后给了一个divbackground-image:;。

div.circular-portrait-user { 
 
    color:#fff; 
 
    height:100px; 
 
    width:100px; 
 
    background:url(http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg); 
 
    background-size:cover; 
 
    box-sizing:border-box; 
 
    text-align:center; 
 
    padding:1em; 
 
}

<div class="circular-portrait-user"> 
 
    <span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span> 
 
    <span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span> 
 
    <span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span> 
 
</div>