[Помогите] Совместите изображения и текст в одной камере вертикально?

У меня есть небольшая 2x2 HTML таблице. Каждая клетка содержит одно изображение и один кусок текста.

Пример изображения:



Как вы можете видеть, текст вертикально под вертикально Средний уровень изображения. Как я могу сделать текст по вертикали в центре, относительно изображения на левой?


Я попробовал несколько различных значений `display`, но я не могу это исправить.

JSFiddle: http://jsfiddle.net/CaCuq/

 

Примерно так:

HTML:

<div id="nst_block">
<ul>
    <li> <a id="social_facebook" onclick="window.open(this.href,'external');return false;" href="http://www.facebook.com/pages/Jenier-Teas/261107327023"><span>icon</span>Facebook</a></li>
<li><a id="social_twitter" onclick="window.open(this.href,'external');return false;" href="http://twitter.com/JenierTeas"><span>icon</span>Twitter</a></li>
<li><a id="social_linkedin" onclick="window.open(this.href,'external');return false;" href="#"><span>icon</span>Google+</a></li>
<li><a id="social_share" onclick="window.open(this.href,'external');return false;" class="addthis_button share"><span>icon</span>Share This</a></li>

    </ul>
</div>

HTML:

#nst_block #social_body ul {
    margin:0;
    padding:0;
    list-style:none;
    width:250px;
    border:1px dotted #000;
}
#nst_block #social_body ul li{
    display:inline-block;
    width:50%;
}
#nst_block #social_body ul li a{
    display:block;
    color:#ccc;
    text-decoration:none;
}
#nst_block #social_body ul li a:hover{
    color:red;
}
    #nst_block #social_facebook span {
    display: block;
    float: left;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    background: transparent url("http://i.imgur.com/QglLT5Q.png") 0 0 no-repeat;
    box-shadow: 0px 5px 3px #303853;
}
#nst_block #social_twitter span {
    display: block;
    float: left;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    background: transparent url("http://i.imgur.com/QglLT5Q.png") -24px 0 no-repeat;
    box-shadow: 0px 5px 3px #303853;
}
#nst_block #social_linkedin span {
    display: block;
    float: left;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    background: transparent url("http://i.imgur.com/QglLT5Q.png") -48px 0 no-repeat;
    box-shadow: 0px 5px 3px #303853;
}
#nst_block #social_share span {
    display: block;
    float: left;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    background: transparent url("http://i.imgur.com/QglLT5Q.png") -72px 0 no-repeat;
    box-shadow: 0px 5px 3px #303853;
}

 

Можете ли вы сделать JSFiddle? Я пытался применения обновленного кода, но это не выглядело правильно.