導航菜單中間的中心標誌

我期待在我居中的頂部導航菜單中間顯示我的標誌。就像現在這樣，我將徽標放在它的頂部。如果我將菜單項分割到不同的容器中，然後使用邊距和填充來實現這個功能，最簡單嗎？還是有更高效的方法？導航菜單中間的中心標誌

這是一個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 {}

來源

2014-02-27 user1632018

如果我是你，我會使用第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。

來源

2014-02-27 01:20:44 Timmah

-1

你可以堅持你的標誌類作爲中間的李。

 <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。

來源

2014-02-27 01:07:01 user1795832

這是不切實際的，而不是語義。 –

因此，使用一個導航的div而不是使用導航標籤。 – user1795832

那裏沒有分歧。 –

你有沒有考慮CSS3顯示：flex？

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

來源

2014-02-27 01:50:40

導航菜單中間的中心標誌

回答

相關問題