如何将导航元素中心定位在 parent div 下？

Question

我在站点横幅下向视图添加了第二个 nav 元素。但是当屏幕以默认分辨率展开时，菜单会向网站横幅的左侧倾斜。

我的目标是将菜单直接放置在与网站横幅一致的下方。我做了一个新的JSFiddle link页面设置来解释当前的定位问题。

我确实使用 Chrome 开发工具进行了检查，它看起来像一个填充，导致定位以橙色突出显示：

当前中心的菜单是这样的：

而我想将其直接放置在 "Self Service" div 下方，如下所示：

我已经尝试减少导航元素自定义 CSS 的右边距，以便与横幅一起进一步向右推进：

#chartNav {
    background-color: #614767;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    margin: 0 5% 0 10%;
    padding-bottom: 20px;
    text-align: center;


}

但是导航菜单仍然偏离横幅的中心。

问题：

如何将导航元素中心置于 parent div 下方？

这是包含横幅网站标题 div 和导航菜单的标记要点：

<div class="container-fluid">
        <div class="col-md-2 col-xs-2"></div>
        <div class="col-md-10 col-xs-6">
            <label class="main-title">Self Service</label>
        </div>

        <div class="row">


            <div class="col">

                <div class="col">

                    <nav>

                        <ul id="chartNav">
                            <li><a>Asset Selection:</a></li>
                            <li>
                                <a>All <span class="arrow">&#9660</span></a>
                                <ul class="sub-menu">
                                    <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li>
                                    <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li>

                                </ul>
                            </li>
                            <li><a>Date Range:</a></li>
                            <li>
                                <input class="input-sm" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
                            </li>
                            <li><a>Profile:</a></li>
                            <li>
                                <a>Default <span class="arrow">&#9660</span></a>
                                <ul class="sub-menu">
                                    <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li>
                                    <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li>

                                </ul>
                            </li>
                        </ul>

                    </nav>

                </div>
            </div>               

        </div>

</div>

Answer 1

添加这个似乎解决了问题，前两行将导航的容器与中心对齐，而第三行删除了您提到的不必要的左边距。

.col-md-10{  
    width: 100%;
    text-align: center;
    margin-left: 0px;
}

看看https://jsfiddle.net/m7h541vb/3

如何将导航元素中心定位在 parent div 下？

How to position nav element center under parent div?

css

resize

css-position

nav

twitter-bootstrap