2使用Flex在图像旁边的元素

Question

我正在尝试获得以下结果（使用flexbox）

这是我使用下面的代码

我正在使用以下代码，它正在对齐图像，但是它将对齐项目应用于所有项目，因此其他h6也是浮动的。

.block {
  display: flex;
  align-items: center;
}

<div class="block">
  <img src="/img/person.jpg" />
  <h5>Jordan Baker</h5>
  <h6>Owner of Bavet</h6>
</div>

我错过了什么吗？谢谢

Answer 1

你应该把你的标题放在另一个包装

中

<div class="block">
  <img src="/img/person.jpg" />
  <div class="wrapper">
    <h5>Jordan Baker</h5>
    <h6>Owner of Bavet</h6>
  </div>
</div>

Answer 2

使用提供的标记，尝试以下

＆＃13;

＆＃13;

.block {
  display: flex;
  height: 100px;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 300px;
}

img {
  width: 100px;
  height: 100px;
}

h5, h6 {
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="block">
  <img src="/img/person.jpg" />
  <h5>Jordan Baker</h5>
  <h6>Owner of Bavet</h6>
</div>

＆＃13;

＆＃13;

＆＃13;

flex-direction和flex-wrap以及块的height是有助于实现所需对齐的属性。

将margin，padding甚至h5的{​​{1}}，h6等属性更改为您的要求。