materializecss center navbarを作成するには？

Question

私が使用してナビゲーションバーの上に私のメニューのセンターを作りたい

materializecss

私のHTMLコード：

.navbar-utility{ 
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8); 
-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8); 
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8); 
    width: 100%; 
    position: fixed; 
    top: 64px; 
    text-align: center; 
} 

.navbar-utility ul.right{ 

    float: left; 
    clear: both; 
    margin:0px auto; 
    text-align:center; 
} 

が、これは動作していないよう：

は

<div class="navbar-utility theme"> 
    <ul class="right"> 
    <li> 
     <a href="#" id="navbar-search-trigger"> 
     <i class="material-icons">search</i> 
     </a> 
    </li> 

    <li> 
     <a href="#" id="navbar-full-screen"> 
     <i class="fa fa-arrows-alt tiny"></i> 
     </a> 
    </li> 

    <li> 
     <a class="dropdown-button" href="#!" data-activates="dropdown1"> 
     Dropdown 
     <i class="material-icons right">arrow_drop_down</i> 
     </a> 
    </li> 
    </ul> 
</div> 

私のCSSコードは以下の通りです。どんな助けもありがとう。

Answer 1

あなたはこのコードを試してみてください..あなたはそれを右に浮上させることしたくない場合は、使用クラスは `right`なぜ

<div id="menu"> 
    <ul> 
     <li><a href="#">Tab one</a></li> 
     <li><a href="#" class="active">Tab two</a></li> 
     <li><a href="#">Tab three</a></li> 
     <li><a href="#">Tab four</a></li> 
    </ul> 
</div> 

#menu { 
    float:left; 
    width:100%; 
    background:#fff; 
    border-bottom:4px solid #000; 
    overflow:hidden; 
    position:relative; 
} 
#menu ul { 
    clear:left; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    left:50%; 
    text-align:center; 
} 
#menu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    right:50%; 
} 
#menu ul li a { 
    display:block; 
    margin:0 0 0 1px; 
    padding:3px 10px; 
    background:#ddd; 
    color:#000; 
    text-decoration:none; 
    line-height:1.3em; 
} 
#menu ul li a:hover { 
    background:#369; 
    color:#fff; 
} 
#menu ul li a.active, 
#menu ul li a.active:hover { 
    color:#fff; 
    background:#000; 
    font-weight:bold; 
}