CSSのナビゲーションバーのセンタリング

Question

まず、他の投稿を試みたことを伝える必要がありますが、残念ながらどれもうまくいきません。ナビゲーションバーがあり、ナビゲーションバーの中央で「HOME」ボタンを開始したいと思っています。基本的に4つのボタンが中央に配置されています。 ありがとうございます。ここではすべてのHTMLとCSS：jsfiddle.net/bqcuu3dk/

Answer 1

は、中心にあなたのナビゲーションバーにheightとline-heightを追加し、text-align。

#navbar { 
 
    height: 43px; 
 
    line-height: 43px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    background-color: #333; 
 
} 
 

 
#navbar a { 
 
    color: #f2f2f2; 
 
    padding: 14px 16px; 
 
    font: normal 15px Verdana, sans-serif; 
 
    text-decoration: none; 
 
    transition: all 0.8s ease 0s; 
 
} 
 

 
#navbar a:hover { 
 
    background-color: #595959; 
 
    color: #d1d1d1; 
 
} 
 

 
#navbar a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
#navbar a.active:hover { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    opacity: 0.65; 
 
}

<div id="navbar"> 
 
    <a class="active" href="#index">Home</a> 
 
    <a href="#nav1">Nav1</a> 
 
    <a href="#nav2">Nav2</a> 
 
    <a href="#nav3">Nav3</a> 
 
</div>

Answer 2

使用この更新CSS：

#navbar { 
    overflow: hidden; 
    text-align:center; 
    background-color: #333; 
} 

#navbar a { 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    font: normal 15px Verdana, sans-serif; 
    text-decoration: none; 
    transition: all 0.8s ease 0s; 
} 

#navbar a:hover { 
    background-color: #595959; 
    color: #d1d1d1; 
} 

#navbar a.active { 
    background-color: #4CAF50; 
    color: white; 
} 

#navbar a.active:hover { 
    background-color: #4CAF50; 
    color: white; 
    opacity: 0.65; 
}