Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code:

ul.nav {
  width: 1000px;
  margin: 0 auto;
  list-style-type: none;
}

.nav li {
  float: left;
  width: 300px;
}

#government {
  clear: left;
}

Despite attempting various solutions like setting text-align: center; or using margin: 0 auto;, I haven't been successful. I've spent hours troubleshooting this issue, so any assistance would be greatly appreciated. Check out the screenshot for reference:

https://i.stack.imgur.com/2or4A.png

The goal is to center the li elements horizontally within the ul. Since the width is variable and different for each li, manually setting margins isn't a feasible solution.

css

Answer №1

Here is a helpful code snippet to kickstart your project:

ul.menu {
  width: 1200px;
  margin: 0 auto;
  list-style-type: none;
  text-align: center; /* center child inline elements horizontally */
}

.menu li {
  display: inline-block; /* Change to inline-block for better alignment */
  width: 200px;
}

Update

If you want the items in two rows, adjust the width of your ul element.

For example:

ul.menu {
  width: 1000px; /* Decrease the width */
  margin: 0 auto;
  list-style-type: none;
  text-align: center; /* center child inline elements horizontally */
  padding-left: 0;
}

Live Demo

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

Dynamic manipulation of classes based on user attributes

One thing I've noticed is that certain WordPress themes, like 'Thematic', include user-specific classes in the body element to avoid using CSS browser hacks. For example: wordpress y2010 m02 d26 h05 home singular slug-home page pageid-94 pa ...

phpjavascriptjquerycssdynamic

Simple 3-column grid design in HTML and CSS

My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...

htmlcssbootstrap-4

Is there a way to enable scrolling in the background when a modal is open?

I recently designed a bootstrap modal, but I encountered an issue where when it appears, the vertical scrollbar on the background page becomes disabled and the content shifts to the right by the width of the scrollbar. I want to prevent this content shif ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Bootstrap: Easily align elements to the right with the .pull-right class, avoiding the need to manually adjust margins

This is the code snippet I am working with (you can view the fiddle here): <div class='container'> <div class='hero-unit'> <h2>Welcome</h2> <p>Please log in</p> <div i ...

htmlcsstwitter-bootstrap

How can I prevent the repetition of a background image causing empty spaces?

Encountered an issue with a repeating background image. In instances where the content is relatively short, shorter than the height of the screen, the background image continues to repeat for the remaining space. Please refer to the accompanying screensh ...

htmlcssrepeat

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns

CSS effect() Practical duration

I have successfully implemented a CSS filter to blur an element, however, I am looking for a way to make the blur ease in smoothly. I'm not sure which css property controls this easing effect? Initially, I tried using transition: 1s; but that ended u ...

csscss-transitionscss-filters

Unable to reach the margin-left properties of the elements

I am facing an issue in accessing the current margin-left CSS property of the class .circle in the code snippet below. A demonstration of this problem can be found on a website called PLUNKr. The reason I need to access this property is because I have to ...

htmlcssangulartypescript

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

jQuery Toggle and Change Image Src Attribute Issue

After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...

javascriptjqueryhtmlcss

Challenges with displaying css/bootstrap classes within angular2

Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...

cssangulartwitter-bootstrap-3angular-ui-bootstrapng-bootstrap

Guide to creating a continuous loop for CSS3 animation

I'm looking to create a setup that can play on repeat, but I'm not very familiar with jQuery. Can anyone lend a hand with this? Check out the DEMO here $('.title1').fadeIn('fast', function() { $('div').addClass ...

jqueryhtmlcssloops

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

javascriptcsshtmlnoscript

ES6 import of CSS file results in string output instead of object

Too long; Didn't read I'm facing an issue where the css file I import into a typescript module resolves to a string instead of an object. Can someone help me understand why this is happening? For Instance // preview.ts import test from './ ...

javascriptcssangularwebpackimport

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

My circumstances: I am new to jQuery and Stack Overflow, seeking assistance for my website project. The challenge: Building a website using Bootstrap 3.3.6 with intricate data tables that need to be stacked dynamically on mobile devices using CSS. It is c ...

javascriptjquerycsshtml

Is it possible to restrict the application of jquery .css() to a particular media query only?

Whenever a user's browser width is below 1160px, a media query is set up to hide my website's right sidebar. They can bring it back by clicking on an arrow icon, causing it to overlap the content with absolute positioning. To achieve this functi ...

javascriptjqueryhtmlcssmedia-queries

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

csscss-animations

I am having trouble placing the button within the image

Essentially, my goal is to place the button within the image and ensure it remains in its position when transitioning to mobile mode or adjusting window size. This is the desired outcome: https://example.com/image https://example.com/button-image .img ...

htmlcss

Having trouble making elements in Tailwind CSS take up the entire page? Seems like they're getting stuck in smaller containers instead

I've been working on creating a layout for my webpage that is similar to the one found here: However, despite using Tailwind CSS, I'm having trouble with the flex styling and getting it to display correctly. import { ChevronRightIcon, HomeIc ...

cssreactjstailwind-css