css - 在多行中将文本居中与图像对齐

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>

我想要的是让每个 span 都在他自己的行上，更准确地说是在 span 下有 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>

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