The justify-position attribute does not have any impact on the positions that are set

Here is the JSX code that resembles HTML but uses ClassName instead of class:

<div className="snavbarcontainer">
            
            <div className="toplefticon">
                <a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
            </div>

            <div className="mainIcons">
                <ul className="icons_ul">
                    <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
                    <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
                    <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
                    <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
                    <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
                    <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
                </ul>
            </div>

        </div>

This is my (S)CSS styling:

body {
    //! background-color: red; - DEBUGGING ONLY!
    margin: 0
}

.snavbarcontainer {
    background-color: black;
    width: 3.5em;
    height: 100vh;
    position: fixed;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}


.icons_ul {
    text-decoration: none;
    list-style-type: none;
    padding: 0;
    
    li /* Adds property to EACH LI, not the UL itself. */{
        margin: 1em 0;
    }
}

.icons_ul {
    justify-content: center;
}

.toplefticon {
    justify-content: flex-start;
}

Essentially, I am trying to place the image with the class "test" at the top of the vertical sidebar and have the icons centered. However, my current implementation is not working as expected.

Thank you for your help!

Answer №1

Can you locate the display: flex; property in the styles for elements with classes icons_ul and toplefticon?

The flex property does not cascade beyond the immediate child element.

body {
    //! background-color: red; - DEBUGGING ONLY!
    margin: 0
}

.snavbarcontainer {
    background-color: black;
    width: 3.5em;
    height: 100vh;
    position: fixed;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}


.icons_ul {
    text-decoration: none;
    list-style-type: none;
    padding: 0;
    
    li /* Adds property to EACH LI, not the UL itself. */{
        margin: 1em 0;
    }
}

.icons_ul {
    display: flex;
    justify-content: center;
}
<div className="snavbarcontainer">
            
            <div className="toplefticon">
                <a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
            </div>

            <div className="mainIcons">
                <ul class="icons_ul">
                    <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
                    <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
                    <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
                    <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
                    <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
                    <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
                </ul>
            </div>

        </div>

In the case of the toplefticon, its default placement will be at the top left if your document is in English, as this is the usual flow for English documents. Thus, there may not be a need for that specific class.

Don't forget to change class to className when utilizing this code in React. I hope this information proves useful.

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

Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...

Is it possible for microdata to function properly on a non-HTML5 website?

I am looking to incorporate microdata into my website, which currently does not use HTML5 but instead uses <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Although I have plans to switch ...

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

What are the steps to ensure that data retrieved from an API is accurately displayed in a table?

My current goal is to collect data from the crypto compare API and display it in a table format. Although I am able to generate the necessary elements and append them to the table body, I am facing an unusual issue. Each time I use a for loop to iterate th ...

Is it possible for the vertical borders of <span> to overlap?

When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack. Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/ .html: <span><span>a& ...

Display a PHP warning message when attempting to add methods to ajax jQuery

Recently, I have delved into the world of ajax and jQuery while working on my final year project. However, I have encountered a problem when adding methods to my JavaScript code. Here is an excerpt from my ajax script: $(document).ready(function() { $ ...

Upon the second click, the addEventListener function is triggered

When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the eve ...

Arrange a line of images in the center

I've been working on aligning images in a row and centering them using flex, but I'm having trouble figuring it out. I managed to center all the images with flex and justify-content center, but setting flex-direction: row on the container doesn&a ...

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

The floating property doesn't appear to function properly in Internet Explorer versions 6 through 8 when

I've noticed that my website in Dutch looks great on Firefox and Safari (both Mac and PC), as well as Chrome (Mac tested, PC untested), but for some reason it's not displaying correctly on IE 6-8 (which is unavailable on Mac). I suspect there may ...

Explain the usage of Razor syntax when defining the name attribute in HTML

Currently, I am utilizing MVC 5 and Razor 3 to dynamically generate an attribute name in HTML using Razor syntax. Specifically, I am focused on creating a data-* attribute. This pertains to determining the name of the attribute rather than its value. Her ...

How can we show a React JS component when clicked, without using the App.js file for display?

How can I display a component onclick in React JS without using UseState in a file other than App.js? This code will be in App.js var [clicks, setClicks] = useState(false) return( <> {clicks && &l ...

Easy-to-use form input ensuring a constant total of 100

Looking for a way to collect numerical values from users that total 100% on a dynamically generated form? I'm exploring the idea of using a script or algorithm to adjust text fields as values are changed, ensuring they always add up to 100%. However, ...

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

Guide to aligning a container to the left in Bootstrap 5

I have a grid container in Bootstrap 5 and I'd like to align it to the left on my webpage. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b54e42f56b61a0acf40"&g ...

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

How can custom selectors be created in LESS?

Let me provide an example of my desired approach. :all() { &, &:link, &:visited, &:active, &:focus } The concept above involves a 'custom selector' that encompasses all pseudo-classes of an anchor tag, e ...

Can you explain the functionality of $on.constructor in AngularJS?

Recently, I attempted an XSS challenge on the PortSwigger labs website. You can find the challenge here. This is my solution to the XSS challenge: {{$on.constructor('alert(1)')()}} However, since I have no prior experience with AngularJS, I&apo ...

Python regular expressions: eliminate specific HTML elements and their inner content

If I have a section of text that includes the following: <p><span class=love><p>miracle</p>...</span></p><br>love</br> And I need to eliminate the part: <span class=love><p>miracle</p>.. ...

Increase the spacing between the scrollbar and the border

Looking to create some breathing room between the scrollbar and the right border of my text area. I've tried adjusting the margin-right/left values in -webkit-scrollbar with no success. Here's my style component: const FormTextArea = styled.texta ...