使用 div 结构创建表答案

【问题标题】：Creating table using div structure使用 div 结构创建表
【发布时间】：2017-06-18 04:51:37
【问题描述】：

我正在尝试完成这种布局..

注意文本总是垂直居中的。我想使用垂直对齐与 div 来实现这一点。

注意：方块没有特定的高度。使用 top:50% 或定位之类的属性无法实现精确居中。

http://jsfiddle.net/V8S8b/

【问题讨论】：

您能否在JS Fiddle 或JS Bin 上发布您目前所获得的内容的演示？
当然！添加了 js fiddle 链接发布！由于某种原因，它也不是垂直对齐的，border-bottom for li 不起作用
ok 垂直中心现在可以工作了。我在 .inner div 中有 img

标签： html css tablelayout

【解决方案1】：

问题是图像。解决方法是将图像和文本内容分成两个单独的“单元格”，这将正确确定对齐方式。这是an example - 我必须为容器设置一些宽度，但由于它们充当表格单元格，它们会根据内容进行调整（正如我试图证明的那样）

【讨论】：

【解决方案2】：

.ul.entries li {
    display:table-row;
    padding:8px;
    border-bottom:1px solid #000;
}

这里有一个错误。 ul 不应该以点开头，因为它不是一个类 .Rest 看起来不错。

【讨论】：

已修复。我的原始代码中没有点，填充仍然没有效果:(

【解决方案3】：

尝试以下操作，我编辑了您在上面提供的 jsfiddle 链接，并设法获得了与您上面包含的图片类似的布局。

h1 {
    display: inline-block;
    font-size:18px;
    font-weight:bold;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

ul.entries {
    width:500px;
}

ul.entries li {
    margin: 10px;
    border-bottom:1px solid #000;
}

.inner {
    overflow: hidden;
    padding: 10px;
}

ul.entries li img {
    float:left;
    margin-right:15px;
    display: inline;
}

【讨论】：

谢谢，但就像我提到的，我正在尝试使用 vertical-align:middle 创建一个具有 div 结构的表，您提供的解决方案不相关