需要居中的徽标与顶部固定导航引导程序

Question

我需要使用Bootstrap固定顶部导航的Centered Logo。意味着品牌应该成为导航的中心。

My Sample Fiddle

.LandPageNavLinks {
    list-style-type:none;
    margin:0;
    padding:0;
}
.LandPageNavLinks > li {
    float:left;
    padding:15px;
    margin-right:20px;
}
.LandPageNavLinks > li > a{
    color:blue;
} 
.LandPageNavLinks > li > a:hover {
    text-decoration:none;
}
.navbar {
  background:lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
        <a class="navbar-brand CenterdLogo" href="#">Brand</a>
    </div>
    <div class="navbar-header pull-right">
        <ul class="LandPageNavLinks">
            <li>
                <a href="#">Sign Up</a>
            </li>
            <li>
                <a href="#">Log In</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

 .LandPageNavLinks {
    list-style-type:none;
    margin:0;
    padding:0;
}
.LandPageNavLinks > li {
    float:left;
    padding:15px;
    margin-right:20px;
}
.LandPageNavLinks > li > a {
    color:blue;

} 
.LandPageNavLinks > li > a:hover {
    text-decoration:none;
}
.navbar {
    background:lightgray;
}
.CenterdLogo {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
    <a class="navbar-brand CenterdLogo" href="#">Brand</a>
    <div class="navbar-header pull-right">
        <ul class="LandPageNavLinks">
            <li>
                <a href="#">Sign Up</a>
            </li>
            <li>
                <a href="#">Log In</a>
            </li>
        </ul>
    </div>
</div>

Answer 2

这是它的替代解决方案。

＆＃13;

＆＃13;

.LandPageNavLinks {
    list-style-type:none;
    margin:0;
    padding:0;
}
.LandPageNavLinks > li {
    float:left;
    padding:15px;
    margin-right:20px;
}
.LandPageNavLinks > li > a{
    color:blue;
} 
.LandPageNavLinks > li > a:hover {
    text-decoration:none;
}
.navbar {
  background:lightgray;
  position:relative;
}
.navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
        <a class="navbar-brand CenterdLogo" href="#">Brand</a>
    </div>
    <div class="navbar-header pull-right">
        <ul class="LandPageNavLinks">
            <li>
                <a href="#">Sign Up</a>
            </li>
            <li>
                <a href="#">Log In</a>
            </li>
        </ul>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我试图解决这个问题，它可能对你有帮助。

 .navbar-header.pull-left{
    float:none !important;
    }
    .navbar-header.pull-right{margin-top: -21px;}
    a.navbar-brand.CenterdLogo{float:none;}

.LandPageNavLinks{
    list-style-type:none;
    margin:0;
    padding:0;
}
.LandPageNavLinks > li{
    float:left;
    padding:15px;
    margin-right:20px;
}
.LandPageNavLinks > li > a{
    color:blue;
    
} 
.LandPageNavLinks > li > a:hover{
    text-decoration:none;
}
.navbar{
  background:lightgray;
}
.navbar-header.pull-left{
float:none !important;
}
.navbar-header.pull-right{margin-top: -21px;}
a.navbar-brand.CenterdLogo{float:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="navbar navbar-fixed-top">

        <div class="navbar-header text-center pull-left">
            <a class="navbar-brand CenterdLogo" href="#">Brand</a>
        </div>
        <div class="navbar-header pull-right">
            <ul class="LandPageNavLinks">
                <li>
                    <a href="#">Sign Up</a>
                </li>
                <li>
                    <a href="#">Log In</a>
                </li>
            </ul>
           
        </div>
               
    </div>