在图像旁边显示两行文本

Question

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

但我更喜欢它们在没有列表样式的情况下垂直居中显示，并且在图像旁边彼此叠加，因此它们都与图像对齐：

• 标题
• 名称

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

旧答案

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

Answer 2

根据你的要求，下面的代码是你想要的（我修改了你的html / css，here's your fiddle）。但请记住，people类的宽度设置为33％，因此当它变得太小时，列表将低于图像。

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