html - 如何让我的导航栏垂直居中

Question

我想弄清楚如何使我的导航垂直居中，在我的一生中，我一直在用尽“右键单击 > 检查元素”，并试图实时了解如何根据中的图片使我的选项卡居中中间。

site if you want to do Right Click > Inspect Element

代码:

HTML

<!-- NAVIGATION BAR -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="/news/">News</a>
                    </li>
                    <li>
                        <a href="/games/">Games</a>
                    </li>
                    <li>
                        <a class="logo" href="href logo link">
                            <img src="logo.png" alt="logo">
                        </a>
                    </li>
                    <li>
                        <a href="/about/">About</a>
                    </li>
                    <li>
                        <a href="/blog/">Blog</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

CSS

.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;}

.navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0;}

.navbar-nav>li {
    float: left;}

.nav>li {
    position: relative;
    display: block;}

Answer 1

改变

.navbar-nav > li{
     float:left
    }

到

.navbar-nav > li{
    display: inline-block !important;
    vertical-align: middle !important;
    }

如果您将那个巨大的 Logo 缩小一点(很多)会有所帮助，否则它会占用大量垂直空间，但无论如何，只要您提出问题，这里就有您的答案。

警告: 这将帮助您在桌面屏幕上实现该效果，但您必须针对较小的屏幕进行调整，因此请随意检查和调整。我的建议是对该 Logo 应用某种控制，例如:

.nav > li > a > img {
    width: 100%;
    height: auto;
    max-width: 300px;
}

或任何你想要/需要的东西。只是不要让它“保持原样”