我需要居中導航欄

我迷路了......我嘗試了其他答案中給出的結果。我需要居中導航欄

在這裏，我CCS：

ul.nav { padding-top: 5px; font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; float: left; } 
ul.nav li { margin-left: 7px; } 
    ul.nav a { font-size: 17px; color: #918f8f; text-decoration: none; text-shadow: 1px 1px 0px #fff; padding: 15px 6px 18px; } 
    ul.nav a:hover { color: #000000; text-shadow: 1px 1px 0px #fff; }

我如何中心我的導航欄？

來源

2013-10-23 Sergio Wall Guzmán

刪除'float：left;'，將固定'width'分配給'ul.nav'並使用'margin：auto;' –

刪除float:left;
添加width.
添加margin:0 auto;

` CSS

ul.nav { 
    padding-top: 5px; 
    font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; 
    width: 300px; 
    margin: 0 auto; 
}

來源

2013-10-23 18:48:35

你可以給你的UL這樣一個固定的寬度和中心：

ul.nav { 
    width: 200px; 
    margin: 0 auto; 
}

如果此導航不應該是一個側邊欄，然後刪除浮動：左;

來源

2013-10-23 18:49:48 aephilea

試試這個

body{ text-align:center;} 
{And rest of your code...}

，這將是在中心。

來源

2013-10-23 19:02:28

首先刪除float - 它會將您的列表拖到屏幕的左側。然後，您有兩種選擇：

給列表一個固定寬度，然後使用margin:0 auto。

ul.nav { 
    width: 40em; 
    margin: 0 auto; 
}

這是否正常，如果你將永遠有你的導航欄鏈接了一組量。如果這種情況經常發生變化，或者甚至是動態變化，則不是很有用我寧願以下解決方案，儘管標記的附加位需要

使用的包裝元素，風格display:table

的HTML：

<nav class="my-class" role="navigation"> 
    <ul> 
     ... 
    </ul> 
</nav>

然後你的CSS：

.my-class { 
    display: table; /*centers its contents*/ 
    width: 100%; /*make sure it doesn't collapse*/ 
    margin: 0 auto; 
} 

ul { 
    whatever /*just don't use text align!*/ 
}

現在不管你放在那個列表中多少，它總是以你爲中心。

來源

2013-10-24 03:37:57 Eamonn

我需要居中導航欄

回答

相關問題