在图像旁边显示两行文本

Question

正如你可以在看到小提琴,被内嵌在图像中显示的姓名和头衔,看起来像这样的截图目前.

但我更喜欢它们显示为垂直居中而没有列表样式,并且在图像旁边彼此叠加,因此它们都与图像对齐:

• 标题
• 名称

.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

UPDATE

你可以使用CSS flexbox实现你想要的东西,如下所示:

body,
p {
  margin: 0
}
.people-wrap {
  width: 33%;
  display: flex;
  align-items: center
}

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>

老答案

只需将您需要的元素并排包装成兄弟姐妹,并提供与您相同的属性 .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>