导航栏中的居中徽标
Centered logo in navigation bar
好的,我制作了这个导航栏:
HTML: http://pastebin.com/Mgurej6L
CSS: http://pastebin.com/vA7b1dT6
我想要 "Unity Code" 在我的导航栏中间,但我试过了,但我似乎无法让它工作。
有什么帮助吗?
好吧,为了使您的导航位于页面的中心,您需要绳索 你的 navigation 在 div 所以我加 div用 class .rope
和你的样式 .rope
{ display: flex; justify-content: center;}
就像下面的代码:
/*Css Navigation code*/
.rope {
display: flex;
justify-content: center;
}
.unity-code-logo {
background-size: 100px 59px;
width: 50px;
height: 59px;
position: absolute;
top: 20px;
left: 460px;
}
.main-navigation {
display: inline;
font-family: ubuntu;
font-size: 15px;
font-weight: bold;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
color: #fff;
background: #181818;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.main-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.main-navigation li:hover {
@include transition(background, 0.25s);
background: #453E3E;
}
.main-navigation ul li ul {
background: #181818;
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top: 12px;
left: 0;
z-index: 999;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li ul:hover {
visibility: visible;
}
.main-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.main-navigationul li ul li:hover {
background: #74b7e4;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
<div class="rope">
<!--Navigation Bar-->
<nav id="navigation" class="main-navigation" role="navigation">
<ul class="navigation-menu-main">
<li><a href="#" class="navigation-menu-main-item">Home</a>
</li>
<li><a href="#" class="navigation-menu-main-item">Store</a>
</li>
<li><img src="http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-b.png" style="height:10px;"></li>
<li><a href="#" class="navigation-menu-main-item">Projects</a>
<ul>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Connect</a>
</li>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Alpha</a>
</li>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
</li>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Also div(.rope)
by default is 100% width so if you want to
give width to rope div you need to add margin: 0 auto;
to
(.rope)
in the style.
Just Add <img>
in another <li></li>
but because you don't have but 3 so is not going to be in the middle it could be right or left otherwise is going to be with the middle <li></li>
for the store below the word.
让我知道你需要什么?
好的,我制作了这个导航栏:
HTML: http://pastebin.com/Mgurej6L
CSS: http://pastebin.com/vA7b1dT6
我想要 "Unity Code" 在我的导航栏中间,但我试过了,但我似乎无法让它工作。
有什么帮助吗?
好吧,为了使您的导航位于页面的中心,您需要绳索 你的 navigation 在 div 所以我加 div用 class .rope
和你的样式 .rope
{ display: flex; justify-content: center;}
就像下面的代码:
/*Css Navigation code*/
.rope {
display: flex;
justify-content: center;
}
.unity-code-logo {
background-size: 100px 59px;
width: 50px;
height: 59px;
position: absolute;
top: 20px;
left: 460px;
}
.main-navigation {
display: inline;
font-family: ubuntu;
font-size: 15px;
font-weight: bold;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
color: #fff;
background: #181818;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.main-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.main-navigation li:hover {
@include transition(background, 0.25s);
background: #453E3E;
}
.main-navigation ul li ul {
background: #181818;
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top: 12px;
left: 0;
z-index: 999;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li ul:hover {
visibility: visible;
}
.main-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.main-navigationul li ul li:hover {
background: #74b7e4;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
<div class="rope">
<!--Navigation Bar-->
<nav id="navigation" class="main-navigation" role="navigation">
<ul class="navigation-menu-main">
<li><a href="#" class="navigation-menu-main-item">Home</a>
</li>
<li><a href="#" class="navigation-menu-main-item">Store</a>
</li>
<li><img src="http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-b.png" style="height:10px;"></li>
<li><a href="#" class="navigation-menu-main-item">Projects</a>
<ul>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Connect</a>
</li>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Alpha</a>
</li>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
</li>
<li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Also
div(.rope)
by default is 100% width so if you want to give width to rope div you need to addmargin: 0 auto;
to(.rope)
in the style. Just Add<img>
in another<li></li>
but because you don't have but 3 so is not going to be in the middle it could be right or left otherwise is going to be with the middle<li></li>
for the store below the word.
让我知道你需要什么?