Блог

HTML-код (это JSX, который совпадает с HTML, но класс заменяется именем класса):

 <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>
 

Мой (Ы)CSS:

 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;
}
 

В принципе, я хочу, чтобы изображение с классом «тест» находилось в верхней части вертикальной боковой панели — и значками в центре. Однако то, что я сделал, в настоящее время не работает.

Спасибо за ваши ответы.

Где находится display: flex; на icons_ul и toplefticon ?

flex , не передается по наследству после первого ребенка.

 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> 

И для toplefticon , он будет слева вверху по умолчанию, если ваш документ сделан на английском языке, потому что это поток по умолчанию для документов на английском языке. Так что в этом занятии нет необходимости.

Не забудьте переименовать class в className , прежде чем использовать этот код в react. Надеюсь, это поможет.