并排放置 img 和 div 并将它们居中的最佳方法是什么？

Question

他们几天前就在网站上工作，现在遇到了问题。 我们尝试将一个 img 和一个 div 并排放置，我已经做到了，但我没有找到解决方案，让 2 个文本在 div.

中垂直居中

我的问题是如何获得与这张图片类似的结果？ This is a snippet of a site i found

我在网站的标记中搜索了它是如何完成的，并认识到它是用显示类型 "table-cell" 制作的，我尝试构建它但我失败了。

希望你能帮助我 提前谢谢你

Answer 1

尝试 Flexbox："life made simple"；

.container {
  display: flex;
}
.container div {
  flex: 1 1 auto;
}

<div class="container">
  <img src="http://placehold.it/50">
  <div>
    <div>Your Name here</div>
    <div>second div</div>
  </div>
</div>