如何居中对齐导航栏答案

【问题标题】：How to Center Align a Nav Bar如何居中对齐导航栏
【发布时间】：2016-01-02 23:07:15
【问题描述】：

我想为我的页脚使用导航，就像它被用作默认 ASP.NET MVC 应用程序的标准菜单一样。样式看起来不错，对我来说很有意义，所以坚持这种配置会很好。如何在不修改 CSS 的情况下将其居中？我担心的是，由于标题也使用了class="nav navbar-nav"，如果我将nav CSS 调整为text-align:center;，将会弄乱页面顶部的主菜单。有什么建议吗？

注意：我知道我之前使用 style="text-align:center;" 之类的东西证明了我的主导航栏菜单项是合理的，但我不记得是如何做到的。

<footer>
        <div class="container-fluid"> //Necessary?
            <div class="row">  //Necessary?
                <div class="col-md-12">  //Necessary?
                        <ul class="nav navbar-nav" style="text-align:center;">  //Trying to adjust the style to center align
                            <li class="dropdown">
                                <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Home <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>@Html.ActionLink("Item 1", "Index", "Home", protocol: null, hostName: null, fragment: "item1", routeValues: null, htmlAttributes: null)</li>
                                    <li>@Html.ActionLink("Item 2", "Index", "Home", protocol: null, hostName: null, fragment: "item2", routeValues: null, htmlAttributes: null)</li>
                                    <li>@Html.ActionLink("Item 3", "Index", "Home", protocol: null, hostName: null, fragment: "item3", routeValues: null, htmlAttributes: null)</li>
                                </ul>
                            </li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                </div>
            </div>
        </div>
</footer>

编辑：

我发现在 <ul> 标记中执行以下操作会创建基本导航栏的外观

<ul class="nav navbar-nav">

另外，还有navbar-left 和navbar-right 类可以左右导航栏，但没有中心。有关创建navbar-center 的任何建议？

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

如果你可以访问你的 CSS，

footer ul li {
text-align:center;
}

或来自 html

<div class="row" style="text-align:center;">

Fiddle

【讨论】：

金球：页脚 .container-fluid {margin:0 auto;文本对齐：中心；}；仅当您在容器流体上固定宽度或使用 % 来处理条时，它才会起作用。

【解决方案2】：

试试这个代码？设置 div 的宽度导航栏的宽度 <div class="col-md-12" style="margin-left:auto;margin-right:auto;width:___;">

【讨论】：