将文本中间对齐到多行图像

将文本中间对齐到多行图像

我在这里有下一个代码:



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


但将我的文字放在图片下方。

最佳答案

这将是完整的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>


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

关于css - 将文本中间对齐到多行图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42532530/

10-09 23:48