我正在尝试自定义Wordpress主题的导航。
我尝试了所有东西，但导航却没有居中。我已经使用text-align: center; display: inline; display: inline-block.进行了尝试，即使使用margin: 0 auto;也似乎无效。
也许我在错误的地方应用规则？
我感谢任何帮助。
以下是HTML代码：
<div class="menu_main">
<div class="navbar yamm navbar-default">
<div class="navbar-header">
<div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
<span>Menu</span>
<button type="button"> <i class="fa fa-bars"></i></button>
</div>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
<nav id="navigation">
<div class="menu-top-navigation-container">
<ul id="king-mainmenu" class="nav navbar-nav">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
<li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
这是CSS：
.menu_main{
float: none !important;
text-align: center !important;
width: 100% !important;
z-index: 9999;
}
.navbar-default{
margin-right: 0px !important;
}
.navbar{
position: relative;
margin-bottom: 0px;
border: 0px solid transparent;
}
.navbar-header{
float: left;
}
div#navbar-collapse-1.navbar-collapse.collapse.pull-right{
z-index: 10000 !important;
}
.navbar-collapse.collapse{
width: 100% !important;
margin: 0 auto !important;
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important
}
.pull-right{
float: right !important;
}
nav#navigation{
text-align: center;
}
nav{
display: block;
}
.menu-top-navigation-container{
float: none !important;
text-align: center !important;
}
.navbar-nav{
float: none !important;
margin: 0 auto !important;
width: 90% !important;
}
.nav>li{
display: inline !important;
}
.navbar-nav>li{
float: left;
}
答案 0 :(得分：1)
删除浮动表单ul和li以及text-center类navbar-collapse
CSS:
.navbar-nav{
float: none;
}
.navbar-nav > li {
display: inline-block;
float: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="menu_main">
<div class="navbar yamm navbar-default">
<div class="navbar-header">
<div class="navbar-toggle navbar-collapse pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
<span>Menu</span>
<button type="button"> <i class="fa fa-bars"></i></button>
</div>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse text-center">
<nav id="navigation">
<div class="menu-top-navigation-container">
<ul id="king-mainmenu" class="nav navbar-nav">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
<li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
答案 1 :(得分：0)
你看看其他规则是否没有覆盖你的规则吗？
也许您可以尝试将!important放到您的规则中，看看是否有效。像这样：text-align: center !important;。它将优先考虑其他规则。
答案 2 :(得分：0)
首先从val trg = sqlContext.read.format("com.databricks.spark.csv").options(Map("path"-> {path+"/test/phonesort.csv"}, "header" -> "true")).load().toDF().repartition(1000) //10 million data
val src = sqlContext.read.format("com.databricks.spark.csv").options(Map("path"-> {path+"/test/bajaj_src.csv"}, "header" -> "true")).load().toDF().sort("PHONE1").repartition(10) //1,00,000 data
val srcrdd = src.rdd.map(row => { (row(1),row)}).persist()
val brd = sc.broadcast(srcrdd) //BROADCASTING SAMLL DATASET
val trgrdd = trg.rdd.map ( row => {
(row(1),row)
})
val res = trgrdd.join(brd.value) map{ case (x,(y,z)) => y.mkString("\"","\",\"","\"")+","+z.mkString("\"","\",\"" , "\"") }
res.saveAsTextFile(path+"/test/1.csv")
删除pull-right，然后：
div#navbar-collapse-1答案 3 :(得分：-1)
尝试：
ul.king-mainmenu {text-align:center; display: table; float: none; margin: 0 auto;}
ul.king-mainmenu > li { display: inline; float:left; }
.menu_main { float:left;width:100%;}