Sam Hayman Sam Hayman - 4 months ago 8
CSS Question

Display two lines of text beside an image

As you can see in the fiddle, the name and title are displayed inline with the image, looks like this screenshot currently.

But I prefer they are displayed like this vertically centered without the list style and on top of each other beside the image so they're both aligned with the image:


  • Title

  • Name





.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

just wrap the elements you need side by side making them siblings , and give the same properties as you had in .people


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>

Comments