css怎么写能实现图片与文字垂直居中对齐？

小图片和文字在同一行且在同一div里，如何使小图片与文字垂直居中对齐？
效果大概是这样：

div {
  display: flex;
  align-items: center
}

CSS

HTML

运行结果

因为每一行前面要有缩进，所有我就给每一行都设置成了一个div，现在就是这个图片不能跟上面的一样。

可以垂直居中基线吗

一般来说文字都是

之类的标签包裹；你的div包裹时没有实现是因为div有了自己默认的高度；如果一定要用div就需要加上高度和行高

<div style="display: flex;justify-content: flex-start;align-items: center;">
        <img src="./12.jpg" style="width: 30px;"> <p>美丽华大饭店</p>
    </div>