How to vertically centre text and images in an LI

Question

I have this list block (SEE DEMO) and need to vertically centre the text with the icon so whenever I have more than 1 line of text everything stays in the middle of the LI. I know that other people asked similar questions here but none worked for me :(

DEMO

Answer 1

you can make use of the display:table properties by changing the following styles:

ul.quote-list li {
    font-size: 14px;
    color: #2a80b9;
    border-top: 1px dashed #dbdbdb;
    line-height: 1.2;
    display:table;
    width:100%;
}

ul.quote-list li > a { /*please note the extra > here */
    color: #2a80b9;
    text-decoration:none;
    display:table-cell;
    vertical-align:middle;
    padding:18px 0 18px 20px;
}

.right {
    display:table-cell;
    vertical-align:middle;
    width:30px;
    text-align:center;
}

Example

Answer 2

You can postion the text and the icon using display: inline-block; with a vertical-align: middle;. You also need to remove the float: right; from the icon.

Here is a quick example. I've added a width and padding-right to the text just to make it look better.

Or use the solution from @ilmk in the comments :)