Css 在div中水平和垂直对齐图像和文本

这个问题充斥着整个互联网，但无论我走到哪里，我都无法实现它

首先是代码。 我花了一个多小时在这上面，无法按照我想要的方式对齐图像。 基本上，第一行的图片左对齐，旁边的文本垂直居中。 下一行，图片右对齐，旁边的文本垂直居中

我花了5分钟在这张桌子上，以得到我想要的

如果你能找出如何使两者看起来一模一样，那么你就是我书中的超级明星。如果你能解决这个问题，那么有人能告诉我为什么在当今的CSS世界里，对齐或定向文本如此困难？？为什么在桌子上使用div？？我觉得这些年来，编码标准变得越来越复杂

---

很抱歉这么说，但是因为我花时间发布这篇文章是为了可能帮助其他人，而不是放弃。然而，我不得不发泄一些情绪：）

你想要灵活的结构，你应该使用div。因为表是固定的。例如：底部单元格的宽度应与顶部单元格的宽度相同。他们之间没有什么不同。表格单元格链接在一起。不能将它们分开。因此，您应该使用表格进行非常简单的设计。更清楚地说，应该使用div进行灵活、复杂、有效的设计。如果需要使用div，则应使用div；）

通过这种方式，您可以使用div来完成您想要做的事情

---

您的JSFIDLE中没有图片，因此很难说出您想要什么。只需将它们上传到tinypic或其他地方，并在代码中引用它们。图片并不重要，只是让它们对齐是我的目标。它们的高度定义为225px。（我的页面宽度约为250px）。因此，如果你愿意，你可以参考互联网上的任何随机图片。你的布局是流畅的还是固定宽度的？如果是流体，则可以使用流体网格（例如960gs流体网格）轻松实现这一点。我不太熟悉表格、表格行和表格单元格属性。这是一种在div中对列/行等内容进行排序的方法吗？它似乎具有与表相同的效果，但可能更灵活一点—行到行或列到列！？不，您也可以将它们用于其他元素。（ul、li、span、a…等）。与表类似，其他元素具有这些属性。