Create a center menu with HTML and CSS - html

Question

I'm trying to create a central menu with HTML and CSS, I created the menu but now I can't understand how to put the menu in the center of the page.
I tried to modify the topnav class with margin: auto but nothing happened.
This is my code:
HTML
<div class="topnav" id="myTopnav">
Home
News
Contact
☰
</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

Using a flexbox for .topnav makes it simple to center the menu.
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">
Home
News
Contact
☰
</div>

Answer 2

If I understand it correctly, you would like the text to be centered horizontally.
To do that, you just need to add text-align:center; to topnav.
The property that you used, margin: auto; would center the navigation bar itself (and not its content), but has no consequence since it already occupies the entire width of the screen.
.topnav {
overflow: hidden;
background-color: #333;
text-align:center;
}
Jsfiddle: https://jsfiddle.net/aud5bsq4/7/

Answer 3

If you are trying to center the entire .topnav bar, you will have to give it a width. Otherwise it will always be as wide as 100% of it's parent element (in this case I'm assuming that's the Body).
Try adding:
.topnav {
width: "your width here";
margin: 0 auto;
}
Here's an example of what that would look like with 300px width.
.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">
Home
News
Contact
☰
</div>
If you are simply trying to center the elements within your .topnav you can try turning it into a Flexbox element.
Try adding:
.topnav {
display:flex;
justify-content: center;
}
Here's an example of using flexbox to center your menu's elements:
.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">
Home
News
Contact
☰
</div>