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

Change the P element to a Span element while maintaining the existing content using the replaceWith

I'm having trouble replacing a p tag with a span while keeping the actual content intact. Can anyone assist me with this, please? $('.anim-letters p').replaceWith( "<span class='letters'>" + $('this').text() + "< ...

jqueryhtmlreplacewith

Text animation that rises smoothly within a concealed overflow region

I'm currently trying to replicate the effect seen in this example: Specifically, I am referring to the text that reads "CREATIVE AGENCY FOR DARING BRANDS" Although it appears simple, I am having trouble figuring out how to achieve it. I primarily wo ...

jquerycss

What is the best way to modify an image in a column when I hover over a table row that was dynamically inserted using a button function?

Is there a way to dynamically change an image in a column when hovering over a table row that was added through a button function? Here is the current code that I am using, but it does not seem to work as intended when I hover over the row. This function ...

javascriptjqueryhtmlcssweb

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

I'm encountering this peculiar issue with a website I recently started designing. My aim is to make the header perfectly aligned with the top of the page. However, despite my attempts, there persists a stubborn gap that measures around 20px, defying a ...

htmlcss

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

cssspring-mvc

Changing images based on different triggers - HTML Markup with jQuery Carousel

I have a website where I'm using a plugin called CarouFredSel, available at Most of the time, it works perfectly fine. However, there are some images that cause the markup to break. I've tried troubleshooting the issue but haven't been able ...

jqueryhtmlcarousel

Assign separate classes to even and odd div elements

My PHP code block has this structure: $flag = false; if (empty($links)) { echo '<h1>You have no uploaded images</h1><br />'; } foreach ($links as $link) { $extension = substr($link, -3); $image_name = ($extensi ...

phphtmlcss

Form submission not being recognized by Ajax's .done() function

I'm trying to include a form from another file using ajax. It's a simple form that is activated by an onclick event defined as follows: <a href="javascript:void(0);" class="remitir" title="Reemitir Solicitud" data-id="'.$value['idso ...

javascriptjqueryhtmlajaxsubmit

Tips for applying personalized CSS to individual Toast notifications in Angular

MY QUESTION : I am looking to customize the CSS of a single toast used in Angular components. While there may be multiple toasts, I specifically want to style one particular toast differently. For example, the toast image can be viewed here: example toast ...

cssangulartypescripttoasttoastr

Is the JavaScript Base64 image data damaged or compromised?

My current task involves selecting an image through an HTML Input and then retrieving the image using Javascript to obtain its Base64/Image Data string. However, the code I have implemented is only returning a partially corrupt or invalid representation o ...

javascriptjqueryhtmlimagebase64

Instructions for embedding a swf file in HTML and linking it to a different page

I've employed the following code snippet to embed my SWF file and redirect it to another page upon clicking: <object type="application/x-shockwave-flash" onmouseup="document.location='http://www.pageopensafterclick.com'" height=50 width= ...

html

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...

htmlcssangulardockpanel

Javascript code that enables me to specify the type of weather

My intention with this code was to create unique characteristics for different weather types and randomly select one by generating a random number. I defined 11 different weather types as objects of the Weather class. I then implemented a getWeather funct ...

javascripthtml

Highlighting the menu items when hovering over them in an ASP menu

Recently, I have been working on my menu code and here is what I currently have: <td><a href="Products.asp?isnew=true"><img height="21" border="0" src="images/productmenu/new_items<%if request.querystring("isnew")="" then%><%else%& ...

asp.nethtmlmenu

I'm currently working on building a form with the Angular framework, but I'm facing a challenge in displaying all the

I am having trouble with my Angular form as I am only able to display two fields when the page is loaded. Code snippet from Component.html: <div class="card m-3"> <div class="card-body"> <form [formGroup]="surveyFor ...

htmlangular

"Create a flexible CSS grid with a dynamically changing number of rows and customizble

I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #containe ...

htmlcss

I rely on the angular-responsive-carousel library for my project, but unfortunately, I am unable to customize the arrow and dots

When it comes to CSS, I utilize ng deep style in Angular 10 to make changes for browser CSS. However, I am facing an issue where the problem is not being resolved by my CSS code. Here is a snippet of my code: > ::ngdeep .carousel-arrow { > b ...

csstypescriptsasscarouselangular10

Adjust the positioning of two divs on mobile devices

My website has two main divs, one on the left and one on the right. The left div is styled with the classes: col-md-3 left_side And the right div with: col-md-9 right_side In the CSS file, the left_side and right_side classes only have padding, without a ...

htmlcsstwitter-bootstrapcss-floatbootstrap-4

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

cssfont-size