【发布时间】：2018-06-08 12:05:48
【问题描述】：
我希望我的导航栏居中并始终显示在屏幕顶部，但是每当我认为我已经修复它时，这一次文本文本会出现问题。我希望它是海峡对岸。有时当我尝试修复它时，“主页”按钮和图像重叠。谢谢。
How I would like it to look, but not centered
<!doctype html>
<html lang="en">
<head>
<title>The Benjamin Project | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/assets/css/animate.css">
<link rel="icon" href="/static/assets/img/favicon.ico"> <!-- site icon -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/static/assets/script.js"></script>
<style>
@font-face {
font-family: Panton;
src:url("/static/assets/font/Panton-LightCaps.otf");
}
body {
margin: 0;
padding: 0;
background-color: #8CD28C;
overflow-x: hidden;
min-height:75px;
line-height:75px;
}
.navbar {
margin: 0;
border-radius: 0;
background-color: #8CD28C; /*bg color for tabs on navbar*/
color: #606060; /*text color for tabs on navbar*/
padding: 50px 0px 50px 0px;
font-size: 2em;
font-family:Panton;
border: 0;
animation-duration: 1.5s;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
color: #606060; /*text color for active*/
background-color: #8CD28C; /*bg color for active*/
font-weight: bold;
}
.selected {
text-decoration-line:underline;
}
.navbar .navbar-brand img {
border-radius: 360%; /*rounds image*/
margin-top: -55px;
margin-right: 10px;
}
.navbar-default .navbar-nav li a {
color: #606060; /*non active colors*/
font-weight: bold;
}
.navbar-default .navbar-nav li a:hover {
color: #606060; /*color of text being hovered over*/
background-color: inherit;
text-decoration: underline;
}
.row {
margin-top: 3%;
padding-left: 20%;
padding-right: 20%;
animation-duration: 2s;
}
.row hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #606060;
border-radius: 100%;
margin: 1em 0;
padding: 0;
}
.center{
width:50%;
max-width:960px;
margin:0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-default fadeInDown animated navbar-static-top center">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- navigation button on mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://imgur.com/k8SlOAa.png" allign="middle" width="125" height="125"></a> <!-- benjamin logo alt="Benjamin Logo"-->
</div>
<div class="collapse navbar-collapse navbar-left center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active selected"><a href="/">Home</a></li> <!-- labels on navigation bar -->
<li><a href="/commands">Commands & Info</a></li>
<li><a href="/about">About</a></li>
<li><a href="/home/views/benjamins.html">Benjamins</a></li>
<li><a href="/account/login">Login</a></li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="/static/assets/script.js"></script>
<page class="main">
<div class="row fadeIn animated"><hr></div>
</page>
</body>
</html>【问题讨论】：
-
考虑从
.navbar-collapse中删除类center，看起来你不需要它（你已经将它声明为包含元素，它继承了50%的width属性)。
标签： html css django twitter-bootstrap