Question

Im trying to center vertically text and icon, but I have problem and can’t fix it.
Here is my example: http://jsfiddle.net/NMGkv/1/

Everything works fine when text have one line, but when it have 2 or more lines, icon (black square) is not centered correctly.
All I want is to have icon always centered in middle of li elements.
Thanks in advance for any kind of help.
Code:

li {
    background:#ccc;
    width:150px;
    height:50px;
    margin-top:2px;
}
.center {
    display:table-cell;
    width:150px;
    height:50px;
    vertical-align:middle;
}
p, span {
    font-family:Arial;
    font-size:14px;
    display:inline-block;
    padding:0;
    margin:0;
}
p {
    width:100px;
    line-height:14px;
}
.icon {
    background:#666;
    width:16px;
    height:16px;
    margin-right:5px;
    margin-left:2px;
    vertical-align:text-top;
}

<ul>
    <li>
        <div class="center">
            <span class="icon"></span>
            <p>This is text on two lines</p>
        </div>
    </li>
    <li>
        <div class="center">
            <span class="icon"></span>
            <p>This is text on three line text text </p>
        </div>
    </li>
    <li>
        <div class="center">
            <span class="icon"></span>
            <p>Text on one line</p>
        </div>
    </li>
</ul>

Answer 1

This CSS should work:

li {
    background:#ccc;
    width:150px;
    height:50px;
    margin-top:2px;
}
.center {
    display:table-cell;
    width:150px;
    height:50px;
    vertical-align: middle;
}
p, span {
    display: block;
    font-family:Arial;
    font-size:14px;
    display:inline-block;
    padding:0;
    vertical-align: middle;
}
p {
    width:100px;
}
.icon {
    background:#666;
    width:16px;
    height:16px;
    margin-right:5px;
    margin-left:2px;
}

You will have to do a diff to find out the changes.