How to style a CSS list and center-align it

My website features a <ul> list with submenus structured like this:

<div id="cssmenu">
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>RNG</span></a>
      <ul>
         <li><a href='#'><span>menu 1</span></a></li>
         <li><a href='#'><span>menu 2</span></a></li>
         <li class='last'><a href='#'><span>menu 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Altro</span></a>
      <ul>
         <li><a href='#'><span>kldajofa</span></a></li>
         <li class='last'><a href='#'><span>Altro12</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

I have 4 <li> elements that I want to center-align on the screen, but I'm unsure how to do it.

You can view a sample here, which includes the CSS code. How can I achieve center alignment for the menu names?

htmlcss

Answer №1

If there are only 4 li elements, like in the example, then set the width to be 25%.

View the working jsFiddle demonstration here

#cssmenu li {
    float: left;
    padding: 0px;
    width: 25%;
}

I have made a small modification to ensure that the sub-navigation menu items are also at 25% width.

Access the updated jsFiddle here

Previously, they were set to have a width of 225px.

#cssmenu li ul {
    width: 25%;
}

Answer №2

If you only have a few menu items, simply add this CSS code:

#navigation > ul > li { width:25%; }

With this code, each list item will take up 25% of the width. The anchor tags are set to display as blocks, filling the entire width of the list item.

Keep in mind that we used the direct child selector > to avoid affecting sub-menu list items. This effect is intended for the main menu level only.

Another option is to explore flexbox, although it may require polyfills since it's not widely supported yet.

Answer №3

When using display:inline-block for list items, you can conveniently center them by applying text-align:center to the parent ul. This alignment works seamlessly regardless of the number of list items.

Fortunately, there are no complications with clearing in this scenario.

Check out the code on JSFiddle

Answer №4

I just made a simple adjustment by adding width to the li element, and now it's working perfectly.

Feel free to take a look at my solution on JsFiddle

#cssmenu li a {
  background: #0D0D0D bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
    width:70px;
}

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

Text scrolls - items are shown all at once

I've been experimenting with creating moving/scrolling text. After some trial and error, I've managed to achieve this effect. If you're interested, you can check out the code on CODEPEN. The issue that's currently bothering me is rel ...

htmlcsstextscrollmove

Focused Filtering in DataGrid Pagination

Seeking to adjust the font size of numerical values (10, 25, and 50 as shown in the screenshot below) within rows per page selection within a pagination section of a DataGrid component. After inspecting each number, it was revealed that .MuiMenuItem-root ...

javascriptcssreactjsdatagridmaterial-ui

Utilizing the power of HTML5 drag and drop functionality in conjunction with Angular Material 2's md

When working with Angular Material 2 and attempting to enable reordering of list elements, I encountered an issue where the functionality works perfectly for li-tag but fails with md-list-item. Why is that? Here is a snippet of my template: <md-nav-li ...

htmlangulartypescriptangular-material

Issue with styling Icon Menu in material-ui

I'm having trouble styling the Icon Menu, even when I try using listStyle or menuStyle. I simply need to adjust the position like this: It currently looks like this: Update: Here's an example: import React from 'react'; import IconM ...

javascriptcssreactjsmaterial-ui

Why does the for loop assign the last iteration of jQuery onclick to all elements?

I've encountered an issue with my code that I'd like to discuss var btns = $('.gotobtn'); $('#'+btns.get(0).id).click(function() { document.querySelector('#navigator').pushPage('directions.html', myInf ...

javascriptjqueryhtml

Tips for creating CSS from the Google Chrome inspector for future use

Hey there, I spent the evening debugging my JSF page and noticed some changes in appearance when checking/unchecking options in Google Chrome Inspector. I want to create a new CSS file based on these checked options and save it for use in my web applicat ...

cssgoogle-chrome-devtools

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

javascripthtmlcssangularjs

How can we incorporate "req.getParameter" within a "for loop" to store data in the database based on the user-defined quantity provided in another servlet?

Currently, I am working on a system where teachers have the ability to edit exams they have created. However, an issue arises when trying to save the questions and answers, as it depends on the number of questions in the exam. While requesting variables f ...

javavariablesservletsrequesthtml

W3C validation issue: "Failure to immediately follow a start-tag with a null end-tag" and similar errors

Encountering validation errors with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

cssxhtmlw3c-validation

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

My express application successfully serves an HTML page from my disk when I initially make a GET request to "http://localhost:3000/" in the browser. Now, I am trying to access a JavaScript file that is located in the same directory on the disk as the HTML ...

javascripthtmlnode.jsexpress

Is it possible to resize an image to fit within its parent div using only the parent div

Is there a way to ensure that an image inside a div resizes itself based on the dimensions of the div without distorting the ratio? <div class="w-50"> <img src="" class="w-full h-full image-cover"> </div> ...

htmlcsstailwind-css

The ion-item is refusing to be centered on the page

I'm having trouble centering an ion-item and it seems slightly off-center. The standard methods like text-align: center and adjusting padding in ion-content don't seem to be working for me. Can someone please assist? https://i.stack.imgur.com/QZ ...

htmlcssionic-frameworkionic4

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

htmlcsstwitter-bootstrap

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

I need a way to switch the icons fa fa-plus with fa fa-minus individually while using collapse in my code, without having all of the icons toggle at once within a foreach loop. Check out a demonstration of my code below: <link rel="stylesheet" href= ...

javascriptphphtmlcssbootstrap-4

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

htmlinternet-explorerfavicon

Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

I am trying to add a minimize button to either minimize my MaterialUi Table or the Paper component that wraps it. Here is the code I have so far: <TableContainer component={Paper} style={{maxHeight:'inherit', maxWidth:'inherit', boxS ...

htmlcssreactjsmaterial-uicss-tables

What Makes Bracket Notation Essential in HTML5?

I recently came across an interesting discussion on the Code Review StackExchange site about best practices for creating forms with multiple rows of identical form inputs. Joseph Silber suggested using bracket notation and avoiding IDs altogether in this s ...

htmlweb-standards

"Automatically scroll back to the top of the page once new content

Is there a way to automatically scroll the page to the top after content has been loaded via Ajax? Here is the code I am using to display the content: $(document).ready(function () { var my_layout = $('#container').layout(); $("a.item_l ...

phpjqueryhtmlajax

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

htmlcssbootstrap-4

Creating an interactive map on an image using HTML and drawing circles

I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...

javascripthtmlimagedictionary