html - Bootstrap 3 在堆叠导航中对齐图像和链接

Question

我正在尝试在 Bootstrap 堆叠导航中定位一个小图像及其文本，这样文本应该与 <img> 垂直对齐.

这是我的代码:

HTML

<ul class="nav nav-tabs nav-stacked" style="list-style-type:none;">
    <li>
        <a href="#" class="side-list"><img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> Stacked List 1</a>
    </li>
    <li>
        <a href="#" class="side-list"><img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> Stacked List 2 </a>
    </li>
    <li>
        <a href="#" class="side-list"><img height="30" width="30" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h"> Stacked List 3 </a>
    </li>
</ul>

CSS

.side-list{
    padding-top:15px;
    padding-bottom:11px;
    text-align:center;
    display:block !important;
    color:#000;
    font-weight: bold;
}

Answer 1

您可以将Stacked List 文本放在<span> 中

作为:

<ul class="nav nav-tabs nav-stacked" style="list-style-type:none;">
    <li>
        <a href="#" class="side-list">
          <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-jw84XlLxTYJoFlqzKr5AVoFoDjVwNCakmB5Rtv1UIW3VqG2h" height="30" width="30"> <span>Stacked List 1<span></a>
    </li>....

然后写CSS

作为:

   .nav-tabs > li > a > span {
       display: inline-block;
       vertical-align: middle; 
    }

这是 JSFiddle

它会为您解决问题。