對齊文本中間圖像多行

我這裏有一個代碼：對齊文本中間圖像多行

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

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

來源

2017-03-01 mosa458

這將是完整的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>

請根據您的要求調整寬度。

來源

2017-03-01 13:09:50

簡單的解決辦法是包裝所有跨在一個.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>

來源

2017-03-01 13:09:58 disstruct

包裝你的跨度在一個容器...

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>

來源

2017-03-01 13:10:05 sol

我把你的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>

來源

2017-03-01 13:17:26 Dom

對齊文本中間圖像多行

回答

相關問題