如何在父 div 下定位导航元素中心？答案

【问题标题】：How to position nav element center under parent div?如何在父 div 下定位导航元素中心？
【发布时间】：2016-07-05 22:04:23
【问题描述】：

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

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

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

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

而我想将它直接放在“自助服务”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;


}

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

问题：

如何在父 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>

【问题讨论】：

更正了 JSFiddle 链接..
中心是什么意思？你能详细描述一下吗？
@NikVarma 在上面添加了一些图片来解释。现在菜单位于站点横幅的左侧，但它应该直接位于“自助服务”横幅下方。
请尝试从#chartNav 中删除边距或边距：0 7% 0 0%，如果你必须做这么多，那么
当我删除边距时，菜单会粘在浏览器的左侧。还有其他想法吗？

标签： css twitter-bootstrap resize css-position nav

【解决方案1】：

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

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

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

【讨论】：