我需要居中导航栏

我迷路了......我尝试了其他答案中给出的结果。我需要居中导航栏

在这里，我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

我需要居中导航栏

回答

相关问题