如何将徽标图像置于引导固定导航的中间?
问题描述:
我正在尝试使用bootstrap创建一个网站,而我之前使用过bootstrap。这次我正在制作一个带有固定导航的网站,标志将位于导航链接的中间。我也希望徽标位于导航链接的顶部。如何将徽标图像置于引导固定导航的中间?
此图片会显示什么,我试图做的:
我现在的代码是这样的:
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 14px;
font-family: 'Helvetica', serif;
}
.navbar {
background: none;
border: none;
margin-top: 20px;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
margin-left: -40px;
}
.navbar ul li {
display: block;
text-align: center;
float: left;
width: 20%;
}
.fourth-color {
background-color: #ffecec;
padding-top: 30px;
padding-bottom: 30px;
}
.third-color {
background-color: #122212;
padding-top: 30px;
padding-bottom: 30px;
}
.second-color {
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
}
.first-color {
background-color: #f25727;
padding-top: 30px;
padding-bottom: 30px;
}
<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul>
<li class="first-color"><a href="#">First</a></li>
<li class="second-color"><a href="#">Second</a></li>
<li><a href="#">Logo</a></li>
<li class="third-color"><a href="#">Third</a></li>
<li class="fourth-color"><a href="#">Fourth</a></li>
</ul>
</div>
</nav>
当我试图链接一个图像,它不适合,并与整个导航栏螺丝。任何帮助表示赞赏!
答
在这里你的问题是你只有在有类的li上填充。 (这就是为什么说标志的锚不居中是因为它没有填充类)
ex。
.navbar ul li {
display: block;
text-align: center;
float: left;
width: 20%;
}
.fourth-color, .third-color, .second-color, .first-color {
padding-top: 30px;
padding-bottom: 30px;
}
将填充应用于所有列表,并且问题已修复。
.navbar ul li {
padding-top: 30px;
padding-bottom: 30px;
}
至于中间的标志。您必须使用position relative
,然后将其他样式添加到该类中,或者在我的例子:nth-child
中添加样式,如下所示。
@import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext");
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 14px;
font-family: 'Helvetica', serif;
}
.navbar {
margin-top: 1em;
text-align: center;
}
.navbar ul {
padding: 0;
text-decoration: none;
list-style: none;
}
.navbar li {
display: block;
float: left;
width: calc(20% - 1px - 0.906752000000002em);
padding: 1.16em 1em;
font: 100 21px "Raleway", sans-serif;
background: #000;
color: #fff;
opacity: 1;
transition: all 0.1s linear;
}
.navbar li:nth-child(1) {
background: #ff410e;
}
.navbar li:nth-child(2) {
background: #f4ca00;
}
.navbar li:nth-child(3) {
background: #fff;
color: #000;
border: 1px solid #000;
border-radius: 2.84em;
padding: 1.76em 0;
width: 20%;
position: relative;
margin: -0.64em -2.16em;
z-index: 1;
}
.navbar li:nth-child(3) a {
color: #000;
}
.navbar li:nth-child(4) {
background: #99d81b;
}
.navbar li:nth-child(5) {
background: #00abf3;
}
.navbar li:hover:not(:nth-child(3)) {
opacity: 0.7;
}
.navbar a {
color: #fff;
text-decoration: none;
}
.navbar .active {
text-decoration: underline;
}
<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul>
<li><a class="active" href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
</ul>
</div>
</nav>
除非你打算创建一个下拉列表,我不建议使用列表此菜单栏。而不是you can just style the anchors to fit your needs。 (请记住保留您的代码DRY):
好的,所以我已经完成了这项工作并将其置于中心位置。但是,当我添加图像时,我会希望自己的徽标是,它会低于导航栏。另外,真正的图像方式会更宽一些,看起来像我提供的imgur链接中的设计。 – Billy
我已经使这[Codepen](http://codepen.io/anon/pen/qZwVpL)显示我在说什么。是的,我不认为我会使用下拉列表,所以这个想法看起来更好。我可以使用该方法添加图片徽标吗? – Billy
我现在明白了。请参阅[如何问](http://*.com/questions/how-to-ask)和[完美的问题](http://codeblog.jonskeet.uk/2010/08/29/writing-the - 完美-问题/)。我已经更新了我的答案,并希望它能够满足您的需求。 BTW我在我的平板电脑上,所以我使用[kodeWeave](http://kodeweave.sourceforge.net/editor/#0873d7f82d37b9824e7426d3ce6e88ff)(Jade/Stylus预处理器)以更快地回答问题。 –