Align Text Mitte in mehreren Zeilen Bild

Question

ich den nächsten Code habe hier:

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

Was ich will, ist jede Spannweite auf seiner eigenen Linie zu haben, genaue Spannweite hat unter Spanne. Ich habe versucht, mit <br> oder mit

style="display:block" 

aber legte meinen Text unter Bild.

Answer 1

Dies wird die vollständige HTML-Code

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

Bitte stellen Sie die Breite entsprechend Ihrer Anforderung sein.

Answer 2

Die einfache Lösung ist es, alle Spannweiten in einem .wrapper wickeln wie so

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

Answer 3

Wickeln Sie Ihre Spannweiten in einem Container ...

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>

Answer 4

ich Ihre 3 spans in einem div und gab dann die div eine 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>