I want to change the navbar span tag to display below the icon using html and css-CodePudding

I have created a navbar which consists of 5 items and each with a icon and a span tag, now I want to display the span tag exactly below the icon for all 5 items in the navbar. Whatever I tried is not working for me to place them exactly one below the other.

Guide me to achieve the functionality I'm trying to implement using html and css.

index.html:

 <div >
            <ul>
                <li ><a href="#" ><img src="images/home.png"><br><span>Home</span></a></li>
                <li><a href="#"><img src="images/network.png"><span>My Network</span></a></li>
                <li><a href="#"><img src="images/jobs.png"><span>Jobs</span></a></li>
                <li><a href="#"><img src="images/message.png"><span>Messaging</span></a></li>
                <li><a href="#"><img src="images/notification.png"><span>Notifications</span></a></li>
         
            </ul>
        </div>

style.css:

.navbar-center ul li{
    display: inline-block;
    list-style: none;
}
.navbar-center ul li a{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 5px 8px;
    padding-right: 5px;
    position: relative;
}

.navbar-center ul span{
    font-size: 15px;
}

/*span tag change side to bottom for .navbar-center ul li a span*/

.navbar-center ul li a img{
    width: 30px;
}

.navbar-center ul li a::after{
    content: '';
    width: 0;
    height: 2px;
    background-color: #045be6;
    position: absolute;
    bottom: -14px;
    transition: width 0.3s;
}
.navbar-center ul li a:hover::after,
.navbar-center ul li a.active-link::after{
    width: 100%;
}

CodePudding user response：

It's because you are using Flex on the tags. Remove the flex or at least add flex-direction: column

.navbar-center ul li{
    display: inline-block;
    list-style: none;
}
.navbar-center ul li a {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 5px 8px;
    padding-right: 5px;
    position: relative;
    flex-direction: column;
}

.navbar-center ul span{
    font-size: 15px;
}

/*span tag change side to bottom for .navbar-center ul li a span*/

.navbar-center ul li a img{
    width: 30px;
}

.navbar-center ul li a::after{
    content: '';
    width: 0;
    height: 2px;
    background-color: #045be6;
    position: absolute;
    bottom: -14px;
    transition: width 0.3s;
}
.navbar-center ul li a:hover::after,
.navbar-center ul li a.active-link::after{
    width: 100%;
}

<div >
        <ul>
            <li >
                <a href="#" >
                    <img src="https://picsum.photos/id/238/120/100" alt="">
                    <div>Home</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/239/120/100" alt="">
                    <div>My Network</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/240/120/100" alt="">
                    <div>Jobs</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/241/120/100" alt="">
                    <div>Messaging</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://picsum.photos/id/242/120/100" alt="">
                    <div>Notifications</div>
                </a>
            </li>

        </ul>
    </div>