Icons doesn't fit in one line - CSS

Question

As you can see the icon and the text are perfectly fit and lined up well on the first image.

I am not sure how can I make them fit together and aligned well such as the icon must not be higher than the text.

Here's my code doing that.

 <nav>
     <ul>
         <li><a href="#"><span id="home"></span> Home</a></li>
         <li><a href="#"><span id="notif"></span>Notifications</a></li>
         <li><a href="#"><span id="msg"></span>Messages</a></li>
     </ul>
 </nav>

Here's the CSS:

nav{
    display: inline-block;
    width: 30%;
    float: left;
    height: 30px;
    display: inline-block;
    margin-top: -15px;
}

nav ul{
    margin-left: -42px;
}

nav ul li{
    float: left;
    display: inline;
    margin-right: 15px;
    list-style: none;
}

nav ul li a{
    text-decoration: none;
    color: #66757f;
    font-size: 14px;
    font-weight: bold;
}

span{
    margin-right: 4px;
    margin-top: 10px;
}

span#home{
    width: 20px;
    height: 18px;
    background: url('../img/home.png') no-repeat;
    display: inline-block;
}

span#notif{
    width: 20px;
    height: 18px;
    background: url('../img/bell.png') no-repeat;
    display: inline-block;
}

span#msg{
    width: 20px;
    height: 18px;
    background: url('../img/messages.png') no-repeat;
    display: inline-block;
}

Possible duplicate of [CSS - Center align text with icon](https://stackoverflow.com/questions/39979775/css-center-align-text-with-icon) — StudioTime, Oct 11 '17 at 08:13

kyun · Answer 1 · 2017-10-11T08:17:32.673

2

nav ul{
    display: flex;
    flex-direction: row;
    margin-left: -42px;
}
nav ul li{
    //float: left;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    list-style: none;

}
span{
    /* margin-right: 4px;
    margin-top: 10px; */ /* Try to remove this */
}

Try to using display: flex.

edited Oct 11 '17 at 08:17

answered Oct 11 '17 at 08:11

kyun

9,710
9
31
66

@DJTam Wait a minute. – kyun Oct 11 '17 at 08:16

Scott Brown · Accepted Answer · 2017-10-11T08:18:26.930

1

Personally, I would use display:flex but if you'd like to continue with the method you're currently using, try adding vertical-align: bottom to your span id's.

span#msg, span#notif, span#home {
    vertical-align: bottom;
}

edited Oct 11 '17 at 08:18

answered Oct 11 '17 at 08:15

Scott Brown

334
1
2
13

Icons doesn't fit in one line - CSS

2 Answers2