使用HTML和CSS創建中心菜單

我想創建一個帶HTML和CSS的中央菜單，我創建了菜單，但現在我無法理解如何將菜單放在頁面中心。使用HTML和CSS創建中心菜單

我試圖用margin：auto修改topnav類，但沒有發生任何事情。

這是我的代碼：

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; 
    } 

}

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

來源

2017-06-18 Matteo

如果我理解正確的話，你想的文字水平居中。

要做到這一點，你只需要添加文本對齊：中心; topnav。

您使用的屬性margin：auto;會將導航欄本身（而不是其內容）置於中心位置，但由於它已經佔據了整個屏幕寬度，所以沒有任何影響。

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

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

來源

2017-06-18 21:21:13

如果你試圖居中整個.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; 
}

下面是一個使用Flexbox的居中您的菜單的元素例如：使用Flexbox的爲.topnav

.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>

來源

2017-06-18 21:17:19

可以很方便地居中菜單。

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>

來源

2017-06-18 21:18:32 Gerard

使用HTML和CSS創建中心菜單

回答

相關問題