HTMLとCSSを使用したセンターメニューの作成

Question

HTMLとCSSを使用して中央メニューを作成しようとしていますが、メニューを作成しましたが、ページの中央にメニューを配置する方法を理解できません。

topnavクラスをmargin：autoで修正しようとしましたが、何も起こりませんでした。

これは私のコードです：

HTML

<div class="topnav" id="myTopnav"> 
     <a href="#home">Home</a> 
     <a href="#news">News</a> 
     <a href="#contact">Contact</a> 
     <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction(`enter code here`)">&#9776;</a> 
    </div> 

CSS

.topnav { 
    overflow: hidden; 
    background-color: #333; 
} 

.topnav a { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 17px; 
} 

.topnav a:hover { 
    background-color: #ddd; 
    color: black; 
} 

.topnav .icon { 
    display: none; 
} 

@media screen and (max-width: 600px) { 
    .topnav a:not(:first-child) {display: none;} 
    .topnav a.icon { 
    float: right; 
    display: block; 
    } 
} 

@media screen and (max-width: 600px) { 
    .topnav.responsive {position: relative;} 
    .topnav.responsive .icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    .topnav.responsive a { 
    float: none; 
    display: block; 
    text-align: left; 
    } 

} 

JS

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
}`enter code here` 
</script> 

Answer 1

私はそれを正しく理解していれば、あなたは水平方向の中央するテキストをしたいと思います。

これを行うには、text-align：center;を追加するだけです。トップナブに。

使用したプロパティmargin：auto;ナビゲーションバー自体を（コンテンツではなく）中央に配置しますが、既に画面の幅全体を占めているため、結果はありません。

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

Jsfiddle：https://jsfiddle.net/aud5bsq4/7/

Answer 2

あなたは全体.topnavバーを中央にしようとしている場合、あなたは意志持ってるそれに幅を与える。それ以外の場合は、親要素の100％の幅になります（この場合、Bodyと仮定しています）。追加

試してみてください。

.topnav { 
    width: "your width here"; 
    margin: 0 auto; 
} 

は、ここでそれは300ピクセル幅でどのように見えるかの例です。

.topnav { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    width:300px; 
 
    margin:0 auto; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav a:not(:first-child) {display: none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive {position: relative;} 
 
    .topnav.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 

 
}

<div class="topnav" id="myTopnav"> 
 
     <a href="#home">Home</a> 
 
     <a href="#news">News</a> 
 
     <a href="#contact">Contact</a> 
 
     <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction(`enter code here`)">&#9776;</a> 
 
    </div>

単にあなたの.topnavあなたがturning it into a Flexbox elementを試すことができます内の要素を中央しようとしている場合。

を増やしてみてください：ここで

.topnav { 
    display:flex; 
    justify-content: center; 
} 

は、メニューの要素を中央にフレキシボックスを使用しての例です：

.topnav { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    display:flex; 
 
    justify-content: center; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav a:not(:first-child) {display: none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive {position: relative;} 
 
    .topnav.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 

 
}

<div class="topnav" id="myTopnav"> 
 
     <a href="#home">Home</a> 
 
     <a href="#news">News</a> 
 
     <a href="#contact">Contact</a> 
 
     <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction(`enter code here`)">&#9776;</a> 
 
    </div>

Answer 3

.topnavのためのフレキシボックスを使用するには、それは簡単なセンタリングすることができますメニュー。

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

.topnav { 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: #333; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav a:not(:first-child) { 
 
    display: none; 
 
    } 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive { 
 
    position: relative; 
 
    } 
 
    .topnav.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<div class="topnav" id="myTopnav"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction(`enter code here`)">&#9776;</a> 
 
</div>