What is the best way to align the menu to the center

Hey there, I'm trying to center a dropdown menu in a 970px wide div. No matter what I do, I can't seem to get it to work correctly.

<div id="menuwrapper">
    <ul class="menu" id="menu">
        <li><a href="#" >Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Flights</a></li>
                <li><a href="#">Car Hire</a></li>
                <li><a href="#">Hotel Arrangements</a></li>
                <li><a href="#">Ferries</a></li>
                <li><a href="#">Other Services</a></li>
            </ul>
        </li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Why us</a></li>
        <li><a href="#">Frequently Asked Questions</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</div>

Here's the CSS:

#menuwrapper {
    height: auto;
    width: 970px;
    position: relative;
    float: left;
    padding: 0px;
    margin: 0px;
    clear: both;
}

ul.menu {
    list-style:none;
    margin:0;
    padding:0;
    font: 16px/20px 'TitilliumText22LLight', Arial, sans-serif;
    text-shadow: #638517 1px 1px 1px;
    color:#FFF;
}

ul.menu * {
    margin:0;
    padding:0
}

ul.menu a {
    display:block;
    color:#FFF;
    text-decoration:none
}

ul.menu li {
    position:relative;
    float:left;
    margin-right:0px;
    border-right-style:none;
    border-left-style:none;
    height: 27px;
    border-top-style: none;
    border-bottom-style: none;
    background-image: url(menuslit.gif);
    background-repeat: repeat-y;
    background-position: left top;
    padding-top: 10px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;
}

ul.menu ul {
    position:absolute;
    top:37px;
    left:0;
    background:#3f3f3f;
    display:none;
    opacity:0;
    text-shadow: none;
    list-style:none;
}

ul.menu ul li {
    display:block;
    background-color:#3f3f3f;
    width: 200px;
    background-image: url(over2.gif);
    background-repeat: repeat;
    padding: 5px 0px 5px 5px;
    font: 14px/20px 'TitilliumText22LLight', Arial, sans-serif;
    height: auto;
}

ul.menu ul li:hover {
    background-image: url(over3small.gif);
    background-repeat: repeat;
}

ul.menu ul ul {
    left:205px;
    top:-0px
}

ul.menu .menulink {
    border:0px solid #aaa;
    padding:10px 7px 0px;
    font-weight:normal;
    width:auto;
    height:30px;
}

ul.menu li:hover {
    background-image: url(over3.gif);
    background-repeat: repeat;
    border-left-width: 0px;
    border-left-style: solid;
    border-left-color: #b7b7b7;
    text-shadow: none;
    background-position: left top;
}

ul.menu .sub {
    background:#d1d1d1 url(sdsimages/arrow.gif) 190px 8px no-repeat
}

ul.menu .topline {
    border-top:0px solid #aaa
}

Answer №1

In my opinion:

#menuwrapper {text-align: center;}
ul.menu {display: inline-block;}

could be the solution.

Answer №2

Adjust the ul.menu width and flexible margins:

ul.menu{
    width: 600px;
    margin: 0 auto;
}

The CSS property "margin: 0 auto" sets the top and bottom margins to zero while making the left and right margins automatic, allowing it to adjust to its container. Hopefully, this solution will meet your needs!

Answer №3

Check out this amazing resource:

.container {
    width: 600px;
}

.list-centered {
    margin: 0 auto;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;
}

.list-centered li {
    float: left;
}

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

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

Currently, I am working on an HTML5/JS application using Node.js in Netbeans 8.2. As I develop the welcome page, I intend to incorporate Bootstrap 4. However, when I attempt to add bootstrap.min.css to my stylesheets folder, I encounter an error as shown i ...

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

tips for personalizing your jQuery image preview script

Currently, I have implemented a jQuery script that allows me to preview multiple images before uploading them. Although the functionality works well, I am facing difficulties customizing it to meet my specific requirements. <script> $(document).r ...

Remain concealed once the lights dim

Looking for a way to fade out a logo in a preloader div after a call, but having issues with it becoming visible again once fully faded out. Ideally, I would like to keep it faded out or set it to display none using only CSS, although I can use jQuery if n ...

Instructions on how to activate scrolling for a div element that becomes visible upon clicking a button

When a button in the navbar is clicked, a div appears with a height that exceeds the viewport/page size. How can I enable scrolling for the entire page when this happens? I attempted to use overflow: scroll, but it only applied scrolling to the internal d ...

"Effortlessly create a disappearing effect for your Bootstrap modal: Fade in upon opening, and instantly

When it comes to Bootstrap 3 modals, I have a question regarding the fade effect. On my outer modal div, I am using class="modal fade" to achieve the default fade in/out effect. However, what I really want is for the modal to fade in when opened, but disap ...

Determine with jQuery whether the img src attribute is null

My HTML structure is as follows: <div class="previewWrapper" id="thumbPreview3"> <div class="previewContainer"> <img src="" class="photoPreview" data-width="" data-height=""><span>3</span> </div> </div> ...

Opening a new window in JavaScript and passing additional parameters

I am facing an issue with my JavaScript link There is a hidden input field named "domain" Below is a div with an onclick script: <div id="button" onclick="window.open('http://www.mylink.nl/?domein=' + document.getElementById('domein&ap ...

The jQuery .html() function seems to only be functioning properly on the initial element

I'm currently collaborating with a partner on a project using WordPress and PHP for an assignment. We've made progress, but I’m encountering a particular issue. My problem arises when utilizing the .html() function in Ajax—only the first tab ...

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

Using Jquery to allow users to dynamically add <a href> links to localstorage

In the context of a work project, there is a bookmark page with internal links already set up. However, I am looking to allow users to add custom bookmarks with their own URLs dynamically and save them via local storage. This could potentially include an i ...

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

When loading dynamic content, I use the following method: $('#my-div').load('my.html'); The code inside my.html looks like this: <html> <head> </head> <body> <script> $(fu ...

Hide table cells using jQuery if they do not contain a specific content

Is there a way to conceal the td elements in a table that do not have the inline CSS attribute width:12%;? See code example below. <td class="" id=""> <td class="" id=""> <td class="" id=""> <td width="12%" class="" id=""><!-- ...

What is the best method to transfer text entered in one textarea to the output of another?

I recently picked up JavaScript again and encountered an issue while developing an app. I am struggling to pass input from one textarea to another, where the text should be converted to uppercase. I attempted to tweak code from w3, but I prefer to achieve ...

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

I'm currently working on integrating a chat feature into my Angular Firestore and Firebase app. Everything seems to be functioning well, except for one issue - whenever a new message is sent or received, the screen automatically scrolls up and gets st ...

Tips for altering the class of an HTML button dynamically when it's clicked during runtime

I currently have a set of buttons in my HTML page: <button id="button1" onclick="myFunction()" class="buttonClassA"></button> <button id="button2" onclick="myFunction()" class="buttonClassA"></button> <button id="button3" onclic ...

There seems to be a JSON syntax error on the website for tracking Covid-

Hi everyone, I'm currently working on a Covid-19 tracker website and facing an issue that says: 'SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data' ; Being new to web development, I am unsure about what&apo ...

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

When viewing my website on a mobile device in landscape mode, the CSS divs sized at 20% do not match the size of the div set at

Currently, I am working on a mobile application that is HTML5 cross-platform compatible. To design the app, I am utilizing Bootstrap 3, although it seems unrelated to the specific issue I am facing. Here's the problem at hand: Within my application, ...

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...