Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width.

body {
  background-color: rgb(26, 40, 114);
}

h1 {
  color: white;
  text-shadow: 7px 7px 10px black;
}

li {
  list-style: none;
  border-radius: 5px;
  border: 2px solid white;
  background-color: black;
  padding: 7px;
  width: 200px;
}

#menu {
  text-align: center
}

#list {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
}
<body>
  <h1 class="text-center">MENU</h1>
  <div id="menu">
    <ul id="list">
      <li><a href="#">text_1</a></li>
      <li><a href="#">text_2</a></li>
      <li><a href="#">text_3</a></li>
      <li><a href="#">text_4</a></li>
      <li><a href="#">text_5</a></li>
    </ul>
  </div>
</body>

htmlcsswebbootstrap-4

Answer №1

To center the menu items, apply the following CSS to the id #menu: display: flex; and justify-content:center;. 

body {
            background-color: rgb(26, 40, 114);
        }

        h1 {
            color: white;
            text-shadow: 7px 7px 10px black;
            text-align:center;
        }

        li {
            list-style: none;
            border-radius: 5px;
            border: 2px solid white;
            background-color: black;
            padding: 7px;
            width: 200px;
        }

        #menu {
            display:flex;
            justify-content: center;
        }

        #list {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            text-align: center;
        }
    <body>
    <h1 class="text-center">MENU</h1>
    <div id="menu">
        <ul id="list">
            <li><a href="#">text_1</a></li>
            <li><a href="#">text_2</a></li>
            <li><a href="#">text_3</a></li>
            <li><a href="#">text_4</a></li>
            <li><a href="#">text_5</a></li>
        </ul>
    </div>
    </body>

Answer №2

Here's a simple solution:

#list li {
  margin: auto;
}

Also, don't forget to include this CSS code snippet:

.text-center {
    width:100%;
    text-align:center;
}


   body {
        background-color: rgb(26, 40, 114);
    }

    h1 {
        color: white;
        text-shadow: 7px 7px 10px black;
    }

    li {
        list-style: none;
        border-radius: 5px;
        border: 2px solid white;
        background-color: black;
        padding: 7px;
        width: 200px;
    }

    #menu {
        text-align: center
    }

    #list {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        text-align: center;
    }
    
    /*added:*/
    #list li {
      margin: auto;
    }
    
     .text-center {
    width:100%;
        text-align:center;
    }
<body>
<h1 class="text-center">MENU</h1>
<div id="menu">
    <ul id="list">
        <li><a href="#">text_1</a></li>
        <li><a href="#">text_2</a></li>
        <li><a href="#">text_3</a></li>
        <li><a href="#">text_4</a></li>
        <li><a href="#">text_5</a></li>
    </ul>
</div>
</body>

Answer №3

Another approach is to modify the default styling of the ul element so that it appears like a table. You can achieve this by applying the following CSS to the #list selector:

display: table;
margin-left: auto;
margin-right: auto;

Here's the updated result:

body {
        background-color: rgb(26, 40, 114);
    }

    h1 {
        color: white;
        text-shadow: 7px 7px 10px black;
    }

    li {
        list-style: none;
        border-radius: 5px;
        border: 2px solid white;
        background-color: black;
        padding: 7px;
        width: 200px;
    }

    #menu {
        text-align: center
    }

    #list {
      padding: 0px;
      overflow: hidden;
      text-align: center;
      display:table;
      margin-left:auto;
      margin-right:auto;
    }
<h1 class="text-center">MENU</h1>
<div id="menu">
    <ul id="list">
        <li><a href="#">text_1</a></li>
        <li><a href="#">text_2</a></li>
        <li><a href="#">text_3</a></li>
        <li><a href="#">text_4</a></li>
        <li><a href="#">text_5</a></li>
    </ul>
</div>

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

PHP is struggling to retrieve the value of "img src"

CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...

phphtml

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Currently, I am utilizing jQuery tabs that have a slide effect whenever you click on them. My query is: How can one prevent the slide effect from occurring on the active tab if it is clicked again? Below is the snippet of my jQUery code: $(document).read ...

javascriptjqueryhtml

Nested click jQuery with draggable elements

After taking advice from @amphetamachine in this thread, I was able to successfully manage nested clicks using jQuery. However, the drag feature that was previously functioning perfectly has now stopped working since I implemented the delegates. The main ...

jqueryhtmljquery-ui

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

This is my innovative solution for easily embedding and styling SVG images using CSS. Traditionally, accessing and manipulating SVG elements with CSS has been a challenge without the use of complex JS frameworks. My method simplifies this process, making ...

jquerycsssvg

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

cssreactjswebpacknext.jscss-houdini

The $_GET variable disappears once the form is submitted

Here's the issue I'm facing: On my homepage, there are tables with rows generated from the database using while loops. Each row includes a cell where an event can be added to that specific row. To achieve this, I pass the row ID as a $_GET variab ...

phpmysqlhtmldatabase

What is the best way to conceal elements that do not have any subsequent elements with a specific class?

Here is the HTML code I have, and I am looking to use jQuery to hide all lsHeader elements that do not have any subsequent elements with the class 'contact'. <div id="B" class="lsHeader">B</div> <div id="contact_1" class="contac ...

javascriptjqueryhtml

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

css

Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this: <div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div> <div style="display: inline-block;"><i ...

htmlcss

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

Top method for removing quotation marks from form input using jquery

Here is a form input that I need to handle: <tr class="formulaRow"> <input type="text" class="ingredient required" name="ingredient"> </tr> Currently, the value from this input is stored as follows: var ingredient = $(".formulaRow").fi ...

javascriptjqueryhtml

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...

androidcsstransparencyborder-image

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

I'm facing an issue with a link in the horizontal navigation bar. When a user hovers over it, I want another div to slide down just below it. The problem is that using the .toggle method doesn't work as expected. It continuously toggles the div e ...

jquerycss

Table design with fixed left columns and header that adjust to different screen sizes

After reading various articles on this issue, I have been unable to find a solution. Most of the examples I've come across feature tables with a single row for the header and rows that consist of just one row, similar to a calendar. My table, on the o ...

htmlhtml-tableresponsive

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Currently, I am attempting to extract the CSS and JS code of an image reveal animation that is part of a static HTML page: https://i.stack.imgur.com/bnmaO.gif The challenge lies in the fact that the desired effect is one among many showcased image animat ...

javascriptjqueryhtmlcss

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Currently, I'm working on a project that involves combining navigation and a video player within the same div container. Here is an image link And another image link The concept is that when you click on one of the four boxes, a new video will appe ...

javascriptjqueryhtmlcss

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

javascripthtmljquerycssfrontend

Tips for maintaining the chat scroll position while typing on mobile devices

Check out this example page: https://codesandbox.io/s/summer-flower-uxw47?file=/index.html:4175-4223 The issue at hand is that when accessing the site from a mobile device and tapping on the input field, the keyboard pops up. This causes the text in the m ...

javascripthtmlcss

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

javascriptjqueryhtmlcss

Troubleshooting problem with CSS hover effect on background images

Can anyone assist me with creating a simple mouse hover effect on these two images? I am having trouble getting it to work. I am looking for a fade transition to occur when the mouse is over the images. Thank you in advance! * { padding: 0; margin: ...

htmlcsstransitionmousehover