导航菜单中间的中心标志

问题描述：

我期待在我居中的顶部导航菜单中间显示我的标志。就像现在这样，我将徽标放在它的顶部。如果我将菜单项分割到不同的容器中，然后使用边距和填充来实现这个功能，最简单吗？还是有更高效的方法？导航菜单中间的中心标志

这是一个JS小提琴，展示了我当前的场景。 JS Fiddle

这是我目前的CSS：

.container { 
width:960px; 
margin:0 auto; 
} 
header, main{ 
    display: block; 
} 
.container-narrow { 
margin:0 auto; 
width:640px; 
} 

h1.logo { 
width:300px; 
margin:0 auto; 
text-indent:100%; 
overflow:hidden; 
white-space:nowrap; 
} 

body h1 { 
background:url(http://placehold.it/300x80) no-repeat; 
height:80px; 
} 

body section.menu,body header.top-section { 
background:url(../img/menu-bg.png) repeat; 
padding:60px 0; 
} 

body header.top-section { 
padding:40px 0; 
position:absolute; 
top:0; 
left:0; 
width:100%; 
z-index:50; 
} 

#menu_container { 
    letter-spacing: 2px; 
    font-family:'intro_regular', sans-serif; 
    font-size: 1.3em; 
    line-height: 1.3em; 
    position: fixed; 
    margin: 0; 
    /*margin-top: -70px; 
    position: relative;*/ 
    z-index: 20; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding: 6px; 
    height: 40px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#menu_container .nav ul { list-style: none; overflow: auto; } 
#menu_container .nav li { float: left; padding: 0.4em 0.8em; font-size: 0.9em; line-height: 1em; cursor: pointer; } 
#menu_container .nav li a { text-decoration: none; text-transform: uppercase; } 
#menu_container .nav li:hover a, 
#menu_container .nav li.active a { color: #fff !important; } 
#menu_container .nav li.contact_screen:hover a, 
#menu_container .nav li.contact_screen.active a { color: white !important; } 
#menu_container .nav li a { color: #000000; } 
#menu_container .nav li a { transition: all 400ms; -webkit-transition: all 400ms; } 
#menu_links { display: inline-block; } 
#menu_button { display: none; color: white; cursor: pointer; text-align: right; padding: 0 0.8em; } 
#menu_button i { font-size: 1.3em; margin-right: -0.3em; color:#bc9321;} 
#menu_links li:first-child {}

如果我是你，我会使用第n个孩子选择一个甚至填充也许160像素适用于两个中间'li'元素（向左'li'和160像素的权利的假设他们是偶数的话，在右边的“李”左边）。 –

我想到了一些非常相似的东西，当时我想，“上帝，之前有人必须写下关于这方面的东西。” [Here you go。]（http://stanislav.it/how-to-center-a-logo-in-unordered-list-navigation-using-css3-nth-child-selector/） –

不幸的是，像IE8一样工作。 – user1795832

答

最近我遇到了这种情况。我通过绝对定位徽标来完成工作，然后使用:nth-child选择器来定位徽标任意一侧的元素，并添加边距以腾出空间。

Here's the Fiddle

:nth-child是伟大的，但你可能需要一个后备组的样式older browsers。

答

你可以坚持你的标志类作为中间的李。

 <div id="menu_links" class="nav"> 
      <ul> 
       <li class="home_link"><a href="#splash_wrapper">Home</a></li> 
       <li class="menus_link"><a href="#menus_wrapper">Menus</a></li> 
<li class="logo">Restauraunt</li 
       <li class="contact_link"><a href="#contact_wrapper">Contact</a></li> 
       <li class="reservations_link"><a href="#reservations_wrapper">Reservations</a></li> 
      </ul> 
     </div>

然后将h1.logo改为li.logo。

这是不切实际的，而不是语义。 –

因此，使用一个导航的div而不是使用导航标签。 – user1795832

那里没有分歧。 –

答

你有没有考虑CSS3显示：flex？

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

导航菜单中间的中心标志

相关推荐