Html 引导：选项卡中的图像与其他选项卡显示混乱

我试着在导航标签的左边放一张图片，但似乎有些地方不对。选项卡现在与图像的顶部对齐，而我希望相反，选项卡应该与图像的底部对齐。您可以查看屏幕截图了解其混乱程度的更多详情：

下面是我在引导中使用的HTML代码，有人知道如何解决这个显示问题吗

    <ul class="nav nav-tabs nav-justified">
        <li class="nav nav-item"><img src="{$image}" class="img-responsive"></li>
        <li id="atab1" class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active">About</a></li>
        <li id="atab2" class="nav-item"><a href="#tab2" data-toggle="tab" class="nav-link">Posts</a></li>
        <li id="atab3" class="nav-item"><a href="#tab3" data-toggle="tab" class="nav-link">Goods</a></li>
        <li id="atab4" class="nav-item"><a href="#tab4" data-toggle="tab" class="nav-link">Services</a></li>
        <li id="atab5" class="nav-item"><a href="#tab5" data-toggle="tab" class="nav-link">Jobs</a></li>
    </ul>

.nav项{
垂直对齐：底部对齐；
}