我在这里有下一个代码:
<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/