How can I centrally align my navigation bar using CSS?

I've been working on a navigation bar for my website for a few days now. However, I'm having trouble centering it and using margin auto doesn't seem to be working. Here's the HTML code I have:

<!DOCTYPE html>    
<html>
<head>
  <title>Homepage - Trolltime</title>
  <link rel="stylesheet" type="text/css" href="default.css">
</head>

<body>
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>
  </ul>
</body>
</html>

Below is my CSS code:

li:hover {font-size:120%}
li:visited{color:black}

ul.nav {
  display: inline-block;
  list-style-type: none;
}

li{
  display:inline;
  float:left;
  margin:auto;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }

Any help would be appreciated. Thank you.

htmlcsscenternavigationbar

Answer №1

View Functional Fiddle Example

Your HTML code uses id while your CSS applies classes to the navigation section. See the snippet below for clarification.

ul#nav {
    display: block;
    list-style-type: none;
    margin: 0 auto;
    width: 500px;
}

Answer №2

Give this code a try, see below for an example:

li:hover {font-size:120%}
li:visited{color:black}

ul#nav {
  display: inline-block;
  list-style-type: none;
}

li {
  display:inline !important;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }
.wrapMenu{ text-align:center; }
<div class="wrapMenu">
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>    
  </ul>
</div>

Answer №3

Here is a suggested approach:

nav ul {
    overflow: auto;
}

nav li {
    list-style-type: none;
    text-align: center;
    cursor: pointer;
    color: #FFFFFF;
}

nav.horizontal {
    display: table;
    margin: auto;
    table-layout: fixed;
    width: 100%;
}

nav.horizontal ul {
    display: table-row;
}

nav.horizontal li {
    display: table-cell;
}

Answer №4

Here is the solution I propose:

I made the following alterations:

ul.nav { 
  display: inline-block;
  list-style-type: none;
}

Now, it reads as:

ul#nav { text-align: center; }

In your li element, you had conflicting styles with both display: inline and display: block;.
I removed: display: block and float: left, while changing display: inline to display: inline-block.

See example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the secon ...

htmlcsstwitter-bootstrapbootstrap-5

Issues with Rails not successfully sending AJAX data to the controller

I am new to AJAX, so please bear with me while I try to figure this out. My goal is to send data from a chat message box to two places – the chat box itself and to a method in my Rails backend. This way, I can display the message in real-time and also st ...

javascripthtmlruby-on-railsrubyajax

Making the toggle button functional on the navbar

Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sur ...

javascriptcssbootstrap-4navbar

CSS3 Perspective Issue: Solutions for Fixing

I'm currently working on creating a card flip animation that flips in the X axis direction. Right now, the div rotates using the rotateX() method. I attempted to add the perspective property to the upper div, but it ended up distorting my div structur ...

javascripthtmlangularjscss

I am looking to modify the anchor link and image source using JQuery based on the specific div ID

Looking to update the link of an anchor and source of an image inside this div when clicking on the FR button. I need help figuring out how to do this with JQuery. Here's the code: <div id="my_id"> <a href="wwww.google.com&qu ...

htmljquery

Difficulty in eliminating left and right padding in Vuetify's Toolbar component despite attempts with spacing helpers

The v-toolbar component features default padding of 24px on the left and right each in the desktop version. Unfortunately, this padding cannot be overridden. I attempted to utilize Vuetify's spacing helpers (pa-0, ma-0), but they only end up shifting ...

cssvue.jsvuetify.js

How come the arrangement of my columns is incorrect when applying the order class to a column in Bootstrap 5?

Can anyone explain why the last 3 Cards in the ordering are being displayed first on the web page? Once the "order-*" terms are removed, they appear in the correct order. This issue seems to occur when there are more than 5 elements in the row. <!DOC ...

htmlbootstrap-5col

I'd like to display just two names from a list at a time and have the option to click on a button to reveal the next two names, unfortunately, there

I am trying to modify my code so that it only displays the first 2 items in an array initially, and then on clicking a button, the next 2 names are displayed until the end. However, the code I have written seems to have a bug. Can you help me correct this ...

htmlcssknockout.js

Learn how to retrieve data using the $.ajax() function in jQuery and effectively showcase it on your HTML page

Can someone assist me with extracting data from https://jsonplaceholder.typicode.com/? Below is the AJAX call I'm using: $.ajax({ url: root + '/posts/', data: { userId: 1 }, type: "GET", dataType: "json", success: function(data) { ...

javascriptjqueryhtmlajax

The button activation functionality in jQuery seems to be malfunctioning

Here I am updating the user information and handling the update function via an AJAX call. My aim is to disable the modify button when no updates are done, and enable it when we click on the text boxes for update. I have used Keyup and focus but none of ...

phpjqueryhtml

Adjusting the rover effect in HTML can alter the size of an image

I'm trying to create a rollover effect in HTML with the following code: <img src="images/facebook.png" onmouseover='this.src="images/facebookActive.png"' onmouseout='this.src="image/facebook.png"' height="32px" width="32px"/&g ...

htmlrollover

Display the HTML content once the work with AJAX and jQuery has been successfully finished

Below are the codes that I have created to illustrate my question. It's not a complete set of code, just enough to explain my query. The process goes like this: HTML loads -> calls ajax -> gets JSON response -> appends table row with the JSO ...

javascriptjqueryhtmlajax

Identifying flex-wrap capabilities across different browsers

Currently, I am developing a project that involves implementing a responsive grid using the flex wrap property. However, since my project needs to support IE9 and older versions of Firefox (version 28 and below), I am in need of a way to determine their ...

javascriptjquerycssflexbox

Instructions on using $.post in jquery to sude uploaded file to a php file for processing

Is there a way to upload photos asynchronously using $.post without relying on .serializeArray()? I want to send a form, containing an upload file, to a PHP processing file. Any suggestions? HTML: <form action="upload1.php" method="post" id="usrform" ...

phpjqueryhtml

Utilizing RSelenium for accessing a website built using the <td> element

My supervisor has tasked me with retrieving data from the China in-depth accident study database. Given my limited experience with HTML and javascript, I decided to utilize RSelenium and phantomjs to assist me in completing this task. Although I was able ...

javascripthtmlcssrselenium

Incorporating specialized pseudo CSS styling to a class

Having a bit of a tricky situation here, I am dealing with the following class: <li><a href="test.html" class="hvr-overline-from-left">Test</a></li> Here is the corresponding CSS: .hvr-overline-from-left { display: inline-block ...

jqueryhtmlcss

Utilizing Bootstrap 4 columns to control the height of a separate column

Is there a way in CSS to make one column in a bootstrap grid determine the height of another column within the same row? For example, consider the following scenario: <div class="row"> <div class="col col-sm-6" id="column1"> <!-- an e ...

csstwitter-bootstrap

Automatically selecting a div using jQuery upon loading the page

Hello everyone. I've implemented some jQuery code that allows div elements to slide horizontally when a link is clicked. However, upon page load, no link is clicked and therefore no div is visible (only the ul is visible). I would like to have the div ...

jqueryhtmlslide

Displaying block in front of flex-items

I have been trying to figure out how to get the red box to display in front of the other flex items, but none of my attempts seem to work. .box { font-size: 2.5rem; width: 100px; line-height: 100px; text-align: center; } .front .box { margin: ...

htmlcss

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tri ...

csswindowsmacos