Creating table using div structure

I'm trying to accomplish this sort of layout..

Notice how the text is always vertical centered. I want to achieve that using vertical-align with divs.

N开发者_运维技巧ote: Blocks don't have a specific height. Using properties like top:50% or positioning won't achieve exact centering.

http://jsfiddle.net/V8S8b/

---

The problem is the image. The work around is to separate the image and the text content into two separate 'cells' which will correctly determine the alignment. Here is an example - I've had to set some width's for the containers but since they are acting as table cells they will adjust according to content (as I have tried to demonstate)

---

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

You have an error here. ul should not be preceded by dot since its not a class .Rest looks fine.

---

Try the following, I edited the jsfiddle link you gave above and managed to get a similar layout to the picture you included above.

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;
}