How to Align HTML Menu in the Middle of the Page

I've been struggling to center my menu on the page. I tried setting the display to block and using margin auto for left and right, but it's not working as expected. You can see the issue in this JSFiddle. Any help would be appreciated.

<ul id="menuList">
    <li><a href="index.html">Home</a></li>
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
</ul>


#menuList{
    display:block;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

#menuList ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#menuList li
{
    list-style: none;
    float: left;
    margin-right: 0.5em;
}

#menuList a
{
    display: block;
    width: 8em;
    color: black;
    text-decoration: none;
    text-align: center;
}
htmlcss

Answer №1

Change the menu display style to inline-block and center its parent using text-align:center

JS Fiddle Example

Substitute body with the id or class of your desired container element


body {
    text-align:center;
}

#menuContainer {
    display:inline-block;
}

Answer №2

If you want to properly align an element at the center, one effective method is by utilizing the margin: 0 auto; property. It's important to note that the element should have a specific width specified, rather than using a fluid width (such as 100%).

To achieve this, simply include the following CSS:

#sidebar {
    width:320px;
    margin:0 auto;
}

Answer №3

It may not be the best idea to use text-align: center on the body, as Vitorino pointed out.

Instead, consider applying this CSS to the ul element and displaying the menu items inline or inline-block. You can see an example here.

#menuList ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
}
#menuList li {
    list-style: none;
    display: inline-block;
    margin-right: 0.5em;
}

Answer №4

To adjust the size, you need to modify the width, like so:

#navMenu{
    display:flex;
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

Answer №5

It is important to understand the difference between using display block and floats in CSS. Display block will make elements start on a new line, while floats can keep them on the same line. However, it is not recommended to mix these two properties together as it can cause complications.
If you want your items to stay in line, consider using 'display:inline;'
If you need items to align to the left or right side of their parent element, floats are the way to go. Just be cautious with floats as they can disrupt the layout. There are alternative methods for floating elements without affecting the document flow.
Below is an example of revised CSS:


#menuList{
    display:block;
    width:100%;
    margin: 0 auto;
    text-align:center;
}

#menuList ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#menuList li
{
    list-style: none;
    display: inline;
    margin-right: 0.5em;
}

#menuList a
{
    display: inline-block;
    width: 8em;
    color: black;
    text-decoration: none;
    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

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

htmlcssgoogle-chrome

The marriage of a sticky and floating navigation bar using the power of Bootstrap 4

I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...

htmlcssinternet-explorerbootstrap-4navbar

Creating an XML response to generate an HTML dropdown menu in PHP

My onChange function in javascript calls a PHP file to fetch UPS rates and update an HTML dropdown list. Everything was working fine until I needed to add an item to the options list based on a comparison. Javascript: function fetch_UPS(el){ var zip = ...

javascriptphphtmlxmlxslt

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

javascripthtmlangulartypescript

Performing calculations on PHP and MySQL data within an HTML table, enabling precise percentage

Here's the code I'm currently working with: <td> <?php echo $row['feild1'] + $row['feild2'] + $row['feild3'] + $row['feild4'] + $row['feild5'] + $row['feild6'] + $row[' ...

phphtmlmysql

Using Google Script Code in Sheet to input a key and click on the submission button

Is there a way to enable using the Enter key in addition to clicking the submit button to input data and save it to a cell? I'm having trouble getting my current code to work. Any suggestions on how to modify it? <script> var itemBox = document ...

javascripthtmlgoogle-apps-script

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

Ways to create distance between two Table Rows in Material-UI TableRow

const useRowStyles = makeStyles({ root: ({ open }) => ({ backgroundColor: open ? "#F5F6FF" : "white", backgroundOrigin: "border-box", spacing: 8, "& > *": { height: "64px", ...

cssreactjsmaterial-ui

What is the best way to toggle the visibility of my menu using JavaScript?

I recently implemented a script to modify a CSS property in my nav bar as I scroll down, triggering the change after reaching 100px. $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if ...

javascripthtmlcss

Looking to validate each input field individually using jQuery?

I am in need of validating all form inputs in the keyup function without having to write validation for each individual input. Is there a way to achieve this using methods like each();? Apologies for what may seem like a silly question. ' ...

jqueryhtmlvalidation

Exploring a one-dimensional nested array in order to make updates to the higher level nodes

I have a 1D nested array: nestedArr: [ { id: 1, parentId: null, taskCode: '12', taskName: 'Parent', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []}, { id: 2, parentId: 1, taskCo ...

javascripthtmlvue.jsrecursion

How to incorporate both image and text links within an HTML div container using JavaScript

I am trying to create a clickable image and text within a div named "films" that both link to the same webpage. However, I am experiencing an issue where only the text link works and the image link is disabled. If I remove the text link, then the image l ...

javascripthtml

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

Is there a way to create a 3-row list with horizontal scroll without the unwanted space between items? I've been using tailwindcss and grid to achieve this layout, but I'm encountering issues with spacing: https://i.stack.imgur.com/WeRyQ.png Cu ...

htmlcsstailwind-css

What's the best way to fill in content for textarea and radio buttons?

I retrieved data from a database and stored it in the variable $tableRe. Now, I need to display these values in a textarea and also check the radio button. Below is my code snippet: $sql = "select (address, gender) from stud table"; if($result=mysqli_que ...

phpjqueryhtmlmysql

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

javascriptjqueryhtmlcssaddclass

Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...

cssselectiongradient

Is it possible to showcase a notification as a popup or alert in Django?

I'm working on a form in Django that redirects to itself after submission. I want to show a message saying "You have entered (work_area)" as a popup or alert that users can close. However, my current setup only displays the message within the HTML aft ...

pythonhtmldjangopopupalert

Can you identify the distinctions between two almost identical HTML emails?

I am currently facing a puzzling situation. There are two emails that I have - one with a sidebar and one without. When the email with the sidebar is received in Gmail, it displays correctly. However, the email without a sidebar loses some formatting, incl ...

htmlemailgmail

Is there a way to spin these hexagons around?

Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting ...

htmlcss

Avoiding line breaks when using an :after pseudo element

I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have: a:not([href*="domain"])::after { content: url(data:image/svg+ ...

htmlcsspseudo-element