在Bootstrap 3 Navbar中居中品牌标志 [英] Centering brand logo in Bootstrap 3 Navbar

问题描述

我试图实现一个Bootstrap 3导航栏，使品牌标志总是保持在中间。这是代码：

I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:

<div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-inner">
        <div class="container">

            <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>

            <a class="brand" style="margin: 0; float: none;" href="#">
                <img src="/Content/themes/next/images/logo.png" /></a>

            <div class="nav-collapse">

                <ul class="nav">
                    <li> <a href="#">Item 1</a></li>
                    <li> <a href="#">Item 1</a></li>
                    <li> <a href="#">Item 1</a></li>
                </ul>
            </div>

            <ul class="nav pull-right">
                <li><a href="#"><div class="nextCog"></div></a></li>
            </ul>

            <span class="navbar-text pull-right">superpup1 </span>

        </div>
    </div>
</div> 

这是一个漂亮的导航栏：

It makes a nice looking navbar:

但是，我想标志（绿色）保持在中间。我将此样式添加到品牌类的标签中：

However, I would like the logo (green) remain in the middle persistently. I am adding this style to the tag with "brand" class:

<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
                <img src="/Content/themes/next/images/logo.png" /></a>

它部分解决了这个问题：徽标在中间，但它推动其余的navbar元素下：

It partially solves the problem: the logo is in the middle but it pushes the rest of the navbar elements down:

>

这是我不想要的效果，我想消除。你能建议一个解决方案吗？

This is an undesirable effect that I would like to eliminate. Could you suggest a solution? Maybe it's a wrong approach to centering a logo from the start ?

推荐答案

尝试以下操作：

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

将您的标志以标志宽度的50％减半，

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

请参阅小提琴

这篇关于在Bootstrap 3 Navbar中居中品牌标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！