html - 在图像旁边显示两行文本

Question

正如您在 fiddle 中看到的那样, 名称和标题与图像内联显示，看起来像这样 screenshot目前。

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

• 标题
• 姓名

.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

更新

你可以通过使用 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>

---

旧答案

只需将您需要的元素并排包装起来，使它们成为 sibling ，并提供与 .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>