Question

我想弄清楚如何垂直居中导航，为了我的生活，我一直在筋疲力尽＆＃34;右键点击＆gt;检查元素＆＃34;并试图看到如何根据中间的图片使我的标签居中的实时。

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;
    }

如果你将那个巨大的徽标变得更小，或者它会占用很多垂直空间会有所帮助，但无论如何，就像你提出的问题一样，这里你有答案。

警告：这将有助于您在桌面屏幕中实现这一效果，但您必须调整较小的屏幕，因此请随意检查和调整。我的建议是对该徽标应用某种控制，例如：

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

或任何你想要/需要的东西。只是不要离开它＆＃34;按照＆＃34;

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

1 个答案: