Css 将Initializer模板中的导航按钮与导航栏底部对齐

我是基于引导模板的网站。我使用的不是左上角的“项目名称”，而是图像。导航链接仍然与页面顶部对齐，但我希望它们位于黑色导航栏的底部：

复制最简单的方法是下载引导模板，并将导航栏中的“项目名称”更改为：

<a class="brand" href="#"><img src="apple-touch-icon-114x114-precomposed.png" /></a>

我一辈子都无法让链接在导航栏底部对齐，除非在

bootstrap.css

（of.min.css）中设置

.navbar.nav

样式，使其上边距约为90px。然而，这种（基于像素的）解决方案感觉是一种错误的方法

我试过玩

position:relative；底部：0和垂直对齐：底部，但无效。这些模板中的CSS数量也没有帮助（特别是对于像我这样的一个开发人员而不是设计师）

有人能让链接整齐地对齐导航栏的底部吗？
如果我自己通过放弃Initializer（太强大了，无法满足我的需要）并使用以下结构来修复它：

<div id="container">
    <div class="navbar">
        <a href="index.html" class="logo">
            <img src="img/logo.png" />
        </a>
        <div class="nav">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="content">
        Content here
    </div>
</div>

#container { width: 1170px; margin: 0 auto; }
.navbar, .content { font-size: 1.6em; }
.navbar .logo { float: left; }
div.nav ul { list-style: none;padding: 0;}
div.nav ul li { display: inline;}
div.nav ul li a { display: block; background-image: url('../img/linksBackground.png'); background-position: 0 80px; background-repeat: no-repeat;
margin-top: 115px; float: left; padding: 11px 30px 9px 30px; text-decoration: none; color: #5dd2ff; }
div.nav ul li a:hover {color: #fff; background-position: 0 160px; background-color: #95e2ff;}
div.nav ul li.active a { color: #fff;font-weight: bold; background-position: left top; background-color: #5dd2ff;}

.clear { clear: both; }