Html 如何实现这种布局？（左边是图像，右边是一些文本）

我想有一个在左边和右边的一些文本图像布局。文本应采用以下结构：

Item 0: value 0
Item 1: value 1
Item 2: value 2

但此文本仅显示在一行中，如：

项目0：值0 项目1：价值1 项目2：价值2

你知道为什么吗

摆弄这个问题：

Html:

项目1:value1

项目2:valu2

项目3:值3

这是因为

p

标记是flex容器的flex项，并且由于您使用了

flex行

，因此您将获得此输出。要解决此问题，可以添加另一个div来包装文本：

项目1:值1
项目2:值2
项目3:值3

<div class="text-center">
  <div class="d-flex flex-row justify-content-center align-items-center">
    <img src="http://via.placeholder.com/100x100"/>
    <p><strong class="text-bg-gray">Item1: </strong>value1</p>
    <p><strong class="text-bg-gray">Item2: </strong>valu2</p>
    <p><strong class="text-bg-gray">Item3: </strong>value3</p>
  </div>
</div>