以未知菜單項爲中心的標誌

Question

具有未知數量的菜單項和徽標我想將徽標圍繞項目和徽標居中放置在屏幕中間。

這種情況下最好的技術是什麼？

nav { 
 

 
    text-align:center; 
 

 
} 
 

 
ul{ 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
    list-style-type:none; 
 
} 
 

 

 
li{ 
 
    display:inline; 
 

 
} 
 

 
li+li{ 
 
    margin-left:15px; 
 

 
}

<nav> 
 
<div id="logo"></div> 
 
    <ul> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a></li> 
 
     <li><a href="#">Menu4</a></li> 
 
     <li><a href="#">Menu5</a></li> 
 
     <li><a href="#">Menu6</a></li> 
 
    <li><a href="#">Menu7</a></li> 
 
    
 
    </ul> 
 
</nav>

Answer 1

假設你想要的標誌和li's是在同一行...有沒有簡單的解決方案。我認爲你需要一點jquery，但是你需要，無論你找到什麼解決方案，偶數的li's。

有了這個jQuery：

var middle = Math.ceil($("ul li").length/2); 
$("ul li:nth-child(" + middle + ")").after('<li class="logo"></li>'); 

你只需要添加一個額外的li在ul中間，後來你可以風格將與CSS圖片：

.logo { 
    width:100px; 
    height:20px; 
    background-image:url(your image); 
    background-repeat:no-repeat; 
     display:inline-block; 
} 

在本JSFIDDLE

Answer 2

在ul li中使用logo或者您可以左右兩個菜單t比較好。否則，你必須做更多。

nav { 
 

 
    text-align:center; 
 

 
} 
 

 
ul{ 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
    list-style-type:none; 
 
} 
 

 

 
li{ 
 
    display:inline; 
 
    position: relative; 
 
    top: 50px; 
 

 
} 
 

 
li+li{ 
 
    margin-left:15px; 
 

 
} 
 

 
#logo { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 13px; 
 
    background: #565656; 
 
    border-radius: 100%; 
 
    border: 1px solid #fff; 
 
    color: #fff; 
 
} 
 

 
#logo a { 
 
    color: #fff; 
 
    position: relative; 
 
    top:35px; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a></li> 
 
     <li><a href="#">Menu4</a></li> 
 
     <li class="logo" id="logo"><a href="#">Logo</a></li> 
 
     <li><a href="#">Menu5</a></li> 
 
     <li><a href="#">Menu6</a></li> 
 
     <li><a href="#">Menu7</a></li> 
 
     <li><a href="#">Menu8</a></li> 
 
    </ul> 
 
</nav>