将文本设置在中间和旁边的精灵

Question

我在底部有一个固定的页脚。

我希望我的文本开发人员旁边的右边和中间的精灵。

我尝试了很多方法，但我唯一想到的就是:文本放在精灵的顶部，或者文本放在最左边的浮动位置。也尝试了绝对和相对位置，但没有得到我想要的。

下面是目前的代码：

CSS：

#sticky {
   position:fixed;
   left:0px;
   bottom:0px;
   padding:5px 0;
   width:100%;
   background:#0277a8;
   color:white;
   border-top:10px solid black;
   text-align:center;
}

.izstradatajs {
    float:left;
}

/* Spriti */

ul#social-networking{
    margin:0px 0 0 0;
    text-align:center;
    display:block;
    padding:0px 0px 0px 0px;
    font-size:12px;

}
#social-networking li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: url(../images/spriti.jpg) no-repeat;
}
#social-networking li, #social-networking a {
    width: 54px;
    height: 54px;
    display: inline-block;
}
ul#social-networking li.twitter {background-position: -69px -13px;}
ul#social-networking li.facebook {background-position: -3px -10px;}
ul#social-networking li.rss {background-position: -130px -10px;}

ul#social-networking li:hover.twitter {background-position: -69px -87px;}
ul#social-networking li:hover.facebook {background-position: -3px -87px;}
ul#social-networking li:hover.rss {background-position: -130px -87px;}

HTML：

<footer id="sticky">
    <div class="izstradatajs">Izstrādātājs: Roberts</div>
    <ul id="social-networking">
        <li class="twitter"><a href="#"></a></li>
        <li class="facebook"> <a href="#"></a></li>
        <li class="rss"> <a href="#"></a></li>
    </ul> 
</footer>

Answer 1

为什么不把开发者作为一个列表项呢？

<footer id="sticky">
    <ul id="social-networking">
        <li class="twitter"><a href="#">TW</a></li>
        <li class="facebook"> <a href="#">FB</a></li>
        <li class="rss"> <a href="#">RSS</a></li>
        <li><div class="izstradatajs">Izstrādātājs: Roberts</div></li>
    </ul> 
</footer>

和

.izstradatajs {
  text-align: left;
  width: 200px;
}