html - 如何居中对齐导航栏

Question

我想为我的页脚使用导航，就像它被用作默认 ASP.NET MVC 应用程序的标准菜单一样。样式看起来不错，对我来说很有意义，因此坚持使用此配置会非常好。我如何在不修改 CSS 的情况下将其居中？我担心的是，由于 header 使用 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 的任何建议？

Answer 1

如果您可以访问您的 css，

footer ul li {
text-align:center;
}

或者从 html

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

Fiddle