Anzeige von zwei Zeilen Text neben einem Bild

Question

Wie Sie in der fiddle sehen können, werden der Name und der Titel inline mit dem Bild angezeigt, sieht derzeit screenshot aus.

Aber ich ziehe sie wie folgt dargestellt werden vertikal ohne die Liste Stil zentriert und auf der jeweils anderen neben dem Bild, so dass sie beide mit dem Bild ausgerichtet sind:

• Titel
• Namen

.people { 
 
    display: inline-block; 
 
    width: 33%; 
 
    margin-bottom: 40px; 
 
} 
 

 
.people img, 
 
.title { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
}

<div class="people"> 
 
    <a href="#"> 
 
    <img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120"> 
 
    </a> 
 
    <p class="title">Title</p> 
 
    <a class="name" href="#">Name</a> 
 
</div>

Answer 1

nur die Elemente wickeln Sie Seite an Seite benötigen sie Geschwister machen, und geben die gleichen Eigenschaften wie Sie in .people hatte

---

body, 
 
p { 
 
    margin: 0 
 
} 
 
.people-wrap { 
 
    width: 33%; 
 
    display: inline-block; 
 
    border: red solid 
 
} 
 
.people, 
 
.card { 
 
    display: inline-block; 
 
    vertical-align: middle 
 
} 
 
img { 
 
    display: block 
 
    /* remove gap*/ 
 
}

<div class="people-wrap"> 
 
    <div class="people"> 
 
    <a href="#"> 
 
     <img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120"> 
 
    </a> 
 
    </div> 
 
    <div class="card"> 
 
    <p class="title">Title</p> 
 
    <a class="name" href="#">Name</a> 
 
    </div> 
 
</div>

Answer 2

Je nachdem, was Sie gefragt haben, ist der Code unten, was Sie wollen (Ich habe Ihre HTML/CSS ein bisschen geändert, und here's your fiddle). Aber denken Sie daran, Sie haben eine Breite von 33% in der people Klasse eingestellt, wenn sie zu klein wird, wird die Liste unter das Bild fallen.

html:

<div class="people"> 
    <div class='col mid'> 
    <a href="#"> 
     <img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120">  </a> 
    </div> 

    <div class='image-list'> 
    <ul> 
     <li> 
     <label>Title</label> 
     </li> 
     <li> 
     <a href="#">Name</a> 
     </li> 
    </ul> 
    </div> 

</div> 

css:

.col { 
    display: inline-block; 
} 
.col.mid { 
    vertical-align: middle; 
} 
.people { 
    display: inline-block; 
    width: 33%; 
    margin-bottom: 40px; 
} 

.image-list { 
    display: inline-block; 
    vertical-align: middle; 
} 

.image-list ul { 
    padding: 0 0 0 30px; 
    margin: 0; 
    list-style: none; 
}