Question

我在这里有下一个代码：

＆＃13;

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

＆＃13;

我想要的是让每一个跨度都在他自己的线上，更准确地说是跨度不足。我试过<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中，如此

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将您的跨度包裹在容器中......

jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我将3 spans放入div，然后div background-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>

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

4 个答案: