对齐垂直导航图标

Question

我正在尝试将导航图标旁边的文字对齐但不确定如何操作。我已经尝试了i类，但它不起作用。不知道怎么做。有人能告诉我实现这个目标的最佳方法吗？我有图标保存img文件夹。这是我的代码：

<div id="main-sidebar"> <!-- right column -->
    <ul class="side-nav">
        <li><a href="#"><i class="offers"></i>Holiday Offers</a></li>
        <li><a href="#"><i class="test-drive"></i>Schedule A Test Drive</a></li>
        <li><a href="#"><i class="directions"></i>Directions To Mill Valley Inspirent</a></li>
        <li><a href="#"><i class="explore"></i>Explore Models</a></li>
        <li><a href="#"><i class="quote"></i>Request A Quote</a></li>
        <li><a href="#"><i class="request"></i>Request A Trade Appraisal</a></li>               
        <li><a href="#"><i class="finance"></i>Explore Financing Options</a></li>
    </ul>
</div>

.offers {
background: url('../img/user.png');
display: inline-block;
text-align: center;
vertical-align: middle;
}

.test-drive {
background: url('../img/user.png');
display: inline-block;
text-align: center;
vertical-align: middle;
}

etc......

Answer 1

设置a-tag padding-left = 3图标宽度 用填充设置元素的背景

a.offers {
    background-image: url('../img/user.png');
    background-repeat: no-repeat;
    background-position: 0 50%; // or 50% 0;
}

a.offers {
    background-image: url('../img/user.png');
    background-repeat: no-repeat;
    background-position: 10px 50%; // or 50% 10px; // move background left-right or top-bottom
}