Unable to align my navigation bar in the center

My navigation bar code is not centering on the website. Even after removing float: left, it doesn't move to the desired position. Can anyone help me with this issue? Thank you.

css

ul#list-nav {
    list-style: none;
    margin: 20px auto;
    padding: 0px;
    width: 800px;
}

ul#list-nav li {
    display: inline;
}

ul#list-nav li a {
    text-decoration: none;
    padding: 5px 0;
    width: 100px;
    float: left;
    background: #485e49;
    color: #eee;
    text-align: center;
    border-left: 1px solid #fff;
}

ul#list-nav li a:hover {
    background: #a2b3a1;
    color: #000
}

html

</head>
<body>
    <div id="as">
        <ul id="list-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
</body>
htmlcss

Answer №1

Your menu is already centered, but the issue lies in the explicit width you have set for it. Try reducing the width of your menu for a better display.

Check out the demo here

CSS

ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:800px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

I have adjusted the width to 205px

CSS

ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:205px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

View the fixed demo here

Answer №2

To achieve the desired layout, be sure to include display: block;

Answer №3

To properly center your navigation bar, you should enclose it within a parent div and apply the following CSS:

<style>
#container {
 margin: auto;
}
</style>

<div id="container"> 

<!-- (insert your navigation bar code here) -->

</div>

Answer №4

In my opinion, the following solution should work:

<div id="as" style="text-align:center">

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

Enclose an <img> tag within a <span> element and use jQuery to assign a class to the <span>

I am trying to wrap a specific <img> tag with a <span> element and assign a class to the <span>. Below is the relevant code snippet: <img id="wrapped-image" alt="" src=""> Despite my efforts, the following code does not seem to w ...

jqueryhtmlcss

Embed SQL parameter into HTML code

Every 24 hours, I have a SQL job that sends an email containing data extracted from my database tables. I store the data in : DECLARE @ReportContentBuilder table(LineSequence int identity, Line varchar(2000)) Here's how it's done : INSERT IN ...

htmlsql

ion-grid featuring alternate columns

As someone who is not very familiar with Angular, I am trying to create a grid layout like the one shown here: https://i.stack.imgur.com/nBavk.png The desired layout includes alternating rows with one image followed by two images. My current attempt at a ...

htmlangularionic-framework

Replacing values in an HTML file with MySql query results

----- Problem solved, solution below ----- In my HTML file, I have a dropdown menu for various courses listed as follows: <ul> <li class="dropbtn" id="1"> <a href="">first</a> <ul class="dropdown-content"> ...

javascriptphphtmlmysqlajax

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

jqueryhtmlcss

Overlaying text on several images

My challenge is centering text over multiple images using a combination of Bootstrap and CSS. While most online resources suggest using position: absolute; to achieve this, I have only been successful in centering the text in the middle of the screen rathe ...

htmlcssbootstrap-4

Error in line 36: firebase.auth function is undefined

Snippet of index.html code <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" ...

javascripthtmlfirebasefirebase-authentication

Converting text into HTML format using Nextjs and React

Currently, I am working on a project that involves using Next.js and React. I am considering creating my own component to parse text based on certain conditions, but I am unsure if something similar already exists. My goal is to: Format the content in HT ...

htmlreactjsparsingnext.js

How can a script be properly embedded into an HTML document?

Currently, I am facing an unusual issue with the script tags in my Django project. My layout.html file includes Jquery and Bootstrap in the head section. Using Jinja, I extended layout.html to create a new file called main.html. In main.html, I added a new ...

javascriptjqueryhtmldjango

Comprehending the Syntax of the ExtJS Framework

I have recently inherited a project utilizing Sencha's ExtJS framework without any handover or documentation. As I navigate through the code, I find myself trying to decipher certain syntax and exploring resources tailored for newcomers to this specif ...

javascriptjquerycssextjs

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

javascripthtmlcssanimation

Utilizing Selenium to automate a VBA loop for extracting HTML data directly into an Excel spreadsheet

I recently received help from the Stackoverflow community to scrape data from a webpage. It's an amazing group of people. They provided me with a function that imports data into Excel from a cell containing a URL. However, I'm facing issues becau ...

htmlvbaexcelselenium

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

jquerycss

Organize rows in the table while maintaining reactivity

A challenge I'm facing with a web app (Angular SPA) is that it displays a large table without the ability to sort. To work around this issue, I've managed to implement sorting via the console. However, re-inserting the rows after sorting causes t ...

javascripthtmlangular

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

javascriptjqueryhtmlcssgoogle-chrome

Creating adaptable breakpoints for content using Bootstrap or pure CSS

I'm trying to create a responsive layout using the Bootstrap "row" and "col" classes, but I'm having trouble figuring out how to structure the content. Here's what I mean: https://i.sstatic.net/WkMmE.png This is my current HTML structure: ...

htmlcssbootstrap-4responsive-designfrontend

"The jQuery colorpicker function is not functioning properly when applied to newly added elements

I've got these amazing gadgets with a cool sliding box feature inside. Initially, there are two widgets visible on the page, but you have the option to add or delete a widget as needed. Within the sliding box, there is a color picker tool. Interestin ...

javascriptjqueryhtmlcolor-picker

What are some ways to implement webkit-line-clamp on a website?

I'm trying to shorten my paragraph using the following CSS code: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before t ...

htmlcsswordpressweb

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

javascriptcssangularjshtmlangular-material