Question

如何在页面中央显示ul元素？我在这个网站上看过其他类似的问题，我试图在我的css文件中使用text-align来实现他们的方式将元素转移到中心。但是我得到了理想的结果。我也尝试使用在页面中间放置元素的边距，但是当从移动浏览器访问时我可以按下菜单底部。

        <!--Top Menu Nav -->
           <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">Tech Experts</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse navbar-menubuilder">
                <ul class="nav navbar-nav navbar-center">
                    <li><a href="#">Company</a>
                    </li>
                    <li><a href="#" target="_blank">Services</a>
                    </li>
                    <li><a href="#">Get In Touch</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
            <!--End Menu Nav -->

    //CSS Center Ul Elements
    #custom-bootstrap-menu.navbar-default .collapse>ul{
        text-align: center;
    }
#custom-bootstrap-menu     .collapse>ul{
    margin-left: 100px;
    margin-top: 30px;

}

Answer 1

边距自动将元素放在容器中。 http://www.w3schools.com/css/css_margin.asp

Answer 2

试试这个

 <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header col-md-4 "><a class="navbar-brand" href="#">Tech Experts</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder col-md-4">
            <ul class="nav navbar-nav navbar-center">
                <li><a href="#">Company</a>
                </li>
                <li><a href="#" target="_blank">Services</a>
                </li>
                <li><a href="#">Get In Touch</a>
                </li>
            </ul>
        </div>
    </div>
</div>

您是在寻找此问题还是其他任何问题？

Answer 3

将text-align：center设置为<ul>包装器，例如。用“崩溃”类来划分

Answer 4

我能够使用保证金将元素集中。

#custom-bootstrap-menu .collapse>ul{
    margin-left: 80px;
    margin-top: 30px;

}

Answer 5

IE8 +

#custom-bootstrap-menu.navbar-default .collapse > ul {
  display: table;  
  margin: 0 auto;
}

Answer 6

如果您的列表中包含项目符号，则将使它们靠近项目

.collapse > ul > li{
    display:table;
    margin: auto;
}

如何在ul中居li元素？

6 个答案: