如何將我的標誌定位在菜單/導航的中心？

-1

需要您對此事的所有幫助。我目前被困在這個CSS定位標誌應該是在菜單導航的正中，就像這個網站http://theorydesign.ca/ ....這就是我想要實現的。如何將我的標誌定位在菜單/導航的中心？

這裏是我的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>CSS Position</title> 
<meta charset="utf-8"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<style> 
body { 
    font:12px Arial, Helvetica, sans-serif; 
    color:#000; 
} 
.container { 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
} 
#header { 
    width: 100%; 
    height: 96px; 
    position: fixed; 
    left: 0; 
    top: 0; 
    background-color: #f8f8f8; 
    border-bottom: 1px solid #e4e4e4; 
    z-index:9999; 
} 
#logo { 
    width:76px; 
    height:64px; 
    display:block; 
    position: absolute; 
    left:50%; 
    margin-left:-43px; /*I'm not sure if this is the right assigned value for this. Don't know the number/value that i should assign*/ 
    top:15px; 
} 
#logo a { 
    background:url(logo.png); 
    display:block; 
    width:76px; 
    height:64px; 
} 
#menu-left { 
    width:256px; /*This is just the number/value that I assign based on the size of my screen*/ 
    left:50%; 
    top:24px; 
    margin-left:-350px; 
    z-index:3; 
} 
#menu-right { 
    width:256px; /*This is just the number/value that I assign based on the size of my screen*/ 
    right:50%; 
    top:24px; 
    margin-right:-350px; 
    margin-left:0; 
    z-index:3; 
} 
.menu { 
    position:absolute; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:15px; 
    line-height:30px; 
    text-transform:uppercase; 
    margin:0; 
} 
.menu li { 
    float:right; 
    margin-left:65px; 
    line-height:35px; 
    margin-bottom:0; 
    position:relative; 
    list-style:none; 
} 
#menu-right li { 
    float:left; 
    margin-left:0; 
    margin-right:65px; 
} 
.menu li a { 
    color:#000; 
    text-decoration:none; 
} 
.menu li a:hover { 
    color:#999; 
} 
</style> 

</head> 
<body> 
<div class="container"> 
    <div id="header"> 
    <div id="logo"> 
    <a href="index.html"></a> 
    </div> 
    <ul class="menu" id="menu-left"> 
    <li> 
    <a href="#menu1">Menu1</a> 
    </li> 
    <li> 
    <a href="#menu2">Menu2</a> 
    </li> 
    </ul>   
    <ul class="menu" id="menu-right"> 
    <li> 
    <a href="#menu3">Menu3</a> 
    </li> 
    <li> 
    <a href="#menu4">Menu4</a> 
    </li> 
    </ul>  
    </div> 
</div> 
</body> 
</html>

來源

2012-10-23 aspireone

你能否清理你的html/css示例並使其更具可讀性？ – yoozer8

清理你的代碼或爲此創建一個小提琴。在解決問題之前，您不能指望某人爲您設置代碼格式。 – ORION

希望你們現在瞭解代碼。對於最後一篇文章感到遺憾，這是我第一次在這裏發表。 – aspireone

看來他們使用的是導航容器，然後設置文本偏離中心的邊緣。線條是一個圖像以及標誌。鏈接是由邊距調整的li。要創建這種效果，首先創建一個具有自動邊距和設置寬度的容器。將文本浮動到中心的左側或右側。一旦你有文字擔心圖像的位置。沒有辦法做到這一點。你可以使用html/css，jQuery等。

來源

2012-10-31 19:52:44 mat335

如何將我的標誌定位在菜單/導航的中心？

回答

相關問題