Question

我正在制作一个非常简单的目录页面 - 左边是公司徽标，右边是公司标题和说明。其中大约有150个是用PHP / MySQL动态生成的。我最近使整个站点响应减去目录页面。现在我正在使用表格来完美地运行目录。许多列表的描述长度（因此高度）不同，并且使用表格允许徽标在内容方面保持完全居中。

为了使这个页面响应，我试图删除该表，并仅依赖于目录列表的div。这是地狱。在包含div上以可变高度垂直居中的图像似乎不可能。

我觉得在这种情况下使用表格并不是一种坏习惯，因为我的数据本质上是“表格式的”。假设这个我是错的，如果没有，我怎样才能使列表响应？如果不改变HTML（到div风格的布局而不是表格），我很难理解能够做到这一点。任何帮助将非常感激。

Answer 1

你可以让div像表一样，我倾向于完全远离桌子，除非我被要求编写电子邮件爆炸。

这些将是你的朋友：

display:table;
display:table-cell;
vertical-align:middle;

Answer 2

只要图像保留为内联元素（您没有将它们表示为显示：块），它们可以通过verical-align：middle垂直对齐，并且不在您的方式。

我假设一个包装类和一些带有display的子元素：inline-block甚至是table-cell，如APAD1建议的那样，如果你能提供更多信息，我们可以更详细地看到它。

话虽如此，您的数据在语义上将被视为列表项而不是表格数据，最好的方法是将它们标记为li元素。