使用div结构创建表

Question

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

请注意文本始终是垂直居中的。我希望使用垂直对齐div来实现这一点。

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

http://jsfiddle.net/V8S8b/

Answer 1

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

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

Answer 2

尝试以下操作，我编辑了您上面提供的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;
}

Answer 3

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