css - 如何将导航元素中心定位在父 div 下？

Question

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

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

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

当前中心的菜单如下所示:

而我想将其直接放置在“自助服务”div 下，如下所示:

我尝试减少 nav 元素的自定义 CSS 的右边距，以便与横幅保持一致:

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


}

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

问题:

如何将导航元素中心放置在父 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