Position the ul li elements to align and justify on the left side of the div container

I'm attempting to left-align a list of options within my div container.

Here is my current setup: https://i.sstatic.net/tFp9q.png
HTML code:

             <div id="categorylist">
                <ul>
                    <li class="text-white">ALL <img src="images/all-   
                    ico.png"></li>
                    <li class="text-white">COMMUNITY DEVELOPMENT <img 
                    src="images/commdev-ico.png"></li>
                    <li class="text-white">SPORTS <img src="images/sports-ico.png"></li>
                    <li class="text-white">EDUCATION <img src="images/edu-ico.png"></li>
                </ul>
                
        </div>

CSS code:

  #categorylist{
      margin-left: auto;
      margin-right: auto;
      display: table;
  }
  #categorylist ul {
      text-align: left;
  }

The desired outcome is illustrated here: https://i.sstatic.net/E7fiQ.png

Please provide any assistance or recommendations. Thank you!

htmlcss

Answer №1

If you want to align the categorylist ul text to the right instead of the left, you can use the following CSS:

#categorylist{
      margin-left: auto;
      margin-right: auto;
      display: table;
  }
  #categorylist ul {
      text-align: right;
}
<div id="categorylist">
    <ul>
        <li class="text-white">ALL <img src="images/all-ico.png"></li>
        <li class="text-white">COMMUNITY DEVELOPMENT <img src="images/commdev-ico.png"></li>
        <li class="text-white">SPORTS <img src="images/sports-ico.png"></li>
        <li class="text-white">EDUCATION <img src="images/edu-ico.png"></li>
    </ul>

</div>

Answer №2

If you're looking to align your UL elements to the right and remove the list styles for the LI items, you can use this CSS snippet below. It has been tested in jsFiddle and should work for you as well. Feel free to give it a try and let me know how it goes!

#categorylist{
     margin-left: auto;
     margin-right: auto;
     display: table;
}

#categorylist ul {
     text-align: right;
}

#categorylist ul li {
     list-style: none;
}

Answer №3

 #category-list{
      margin: auto;
      display: table;
  }
  #category-list ul {
      text-align: left;
  }

Answer №4

Update the style text-align: left; to text-align: right; within the #categorylist ul class

Answer №5

Make the following adjustments to your code:

<!DOCTYPE html>
<html>
    <head>
        <style>
            <style>
            #categorylist{
                margin-left: auto;
                margin-right: auto;
                display: table;
            }
            #categorylist ul {
                text-align: left;
            }
            #categorylist li{
                list-style-type: none;}
            .image-list{margin-right:10px;}
        </style>
    </head>
    <body>

    <body>

        <div id="categorylist">
            <ul>
                <li class="text-white">
                    <img  class="image-list" src="images/all-   
                          ico.png">ALL
                </li>
                <li class="text-white">
                    <img class="image-list"   src="images/commdev-ico.png">COMMUNITY DEVELOPMENT 
                </li>
                <li class="text-white">
                    <img class="image-list" src="images/sports-ico.png">SPORTS 
                </li>
                <li class="text-white">
                    <img class="image-list" src="images/edu-ico.png">EDUCATION 
                </li>
            </ul>

        </div>
    </body>

</body>
</html>

I hope this works for you.

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

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

javascripthtmlmxgraph

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Currently, I am utilizing ng-bootstraps datepicker to showcase user data on a daily basis. I have implemented a custom day template to apply specific CSS classes. <ng-template #customDay let-date> <div class="custom-day" [ngCla ...

cssangulartypescriptdatepickerng-bootstrap

CSS: creating a subtle fade-in animation for an address element and an image

Can you help me out with some advice? I'm working on a navigation bar that has a dropdown button. Each item in the dropdown menu has a small image with an opacity animation applied to it. When you hover over the image, it becomes visible and vice vers ...

htmlcsscss-animations

Display the menu on the left side for mobile devices

Looking to switch up the mobile menu on my website built with Bootstrap. Rather than it dropping down from the top, I want it to slide in from left to right. Check out my markup here. https://i.sstatic.net/DAfhl.png Trying to achieve a menu layout simila ...

jqueryhtmlcssmenu

Achieve full height for nested children within a container of varying height without using flexbox

Inside a container of variable height, I have multiple nested lists that I want to take up all the available space. I attempted to use flexbox for this purpose, but performance issues arose in Chrome, FF, and Safari when dynamically adding more nested lis ...

htmlcss

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

javascripthtmlcsstypescript

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

javascripthtmlcsssvgbootstrap-4

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

What coding techniques can be used to create dynamic animation of a log stream in javascript/css

When I have a series of events in my browser, I want to display them as a list with a smooth animation effect. As each new event comes in, I'd like the existing items to slide down gracefully, making room for the new event to fade in at the top of the ...

javascriptjquerycssanimationcss-animations

Customizing Material UI - Overrides in MakeStyles

Hello there! I'm currently facing a challenge with adding custom CSS to a material UI App Bar. Despite using the makeStyles function, all of my styles are being overridden by the default Material UI styling. The only solution I have found so far is to ...

cssreactjsmaterial-uijssreact-snap

Is there a way to make my sticky sidebar automatically scroll back up when the page reaches the footer?

I'm facing a common issue on StackOverflow, but the solutions I've come across so far haven't completely resolved my problem. To understand the issue better, you can take a look at this fiddle that I found referenced here. My challenge lies ...

javascriptjqueryhtmlcss

Firefox users are facing issues with the functionality of the responsive menu

Recently, I made the switch to a responsive menu on my website. Although I'm not an expert in HTML, I used a free menu that has been performing well overall, including on mobile devices. However, it seems there is an issue with compatibility on Firefo ...

htmlcssfirefoxmenu

aligning content that has exceeded the boundaries

I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...

htmlcss

changes in size in relation to the position of the parent element

Utilizing the transition:scale(1.2) property to conceal a div positioned in the lower left corner of the viewport. Currently, the scaling effect originates from the center as intended: View 'CURRENTLY' on Fiddle I aim to scale it as if the div ...

csscss-transitions

Looping within a JavaScript object is like exploring a labyrinth of

I am in the process of refactoring some code to update page content on a set interval. Currently, I am iterating through an original JSON object to create a subset of content related to specific pages based on their IDs. Upon logging the data, I can confir ...

javascripthtmljson

What is the best way to send data from jQuery to PHP?

Can anyone help me figure out how to retrieve the modified value of an input form using JQuery and submit it via a POST form to PHP for insertion into a MySQL database? Below is the form structure: `<fieldset> <input type="da ...

phpjqueryhtmlmysqlforms

How to avoid inheriting CSS properties with "position: relative" styling from parent elements

my body style is similar to the following: * { padding: 0px; margin: 0px; } html, body { background-color: #006F92; position: relative; direction: rtl; font: 9pt Tahoma, 'b yekan' , 'b homa' , 'arial&apos ...

asp.netcsspositioningdocument-body

Troubleshooting the Next.js OG image meta tag issue

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg" After utilizing next/head and inserting the meta tag image above, I encountered an issue where the image did not display when the link was shared. Any suggestio ...

htmlnext.jsmeta-tags

Struggling to make the javascript function compatible with the drop-down menu

I'm encountering issues with making my JavaScript work properly alongside my HTML. Specifically, I want the "activity" drop-down box to function in conjunction with the "city" drop-down box. For instance, if I choose "Brisbane" and then select an acti ...

javascripthtml