CSS list items text and icon alignment

Question

I am creating a ul list with css properties.

<div class="footer" style="width: 100%; height: 40px; background-color: #00b3ee">
    <ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; ">
        <li style="float: left; border-right:1px solid #bbb;">
            <a href="#" style="display: block;color: white;text-align: center; padding: 10px 10px; text-decoration: none;">item-1 <i class="fa fa-bell"></i></a>
        </li>
        <li style="float: left; border-right:1px solid #bbb;">
            <a href="#" style="display: block;color: white;text-align: center; padding: 10px 10px; text-decoration: none;">item-1 <i class="fa fa-cog"></i></a>
        </li>
    </ul>
</div>

This appears like this:

But I want to appearings text and icon aligned center and one under the other.

Answer 1

Just do like this :

.footer{
    width: 100%;
    height: 40px; 
    background-color: #00b3ee;
}
.footer li{
    float: left; 
    border-right:1px solid #bbb;
}
.footer li a{
    display: block;
    color: white;
    text-align: center; 
    padding: 10px 10px; 
    text-decoration: none;
}
/* For the icon : */
.footer li a i{
    text-align: center;
    display: block;
}

That should set your icon above the text in the button.

Answer 2

To make the icons appear below the text you must style the li element to overflow: hidden and i to display: block , like this:

<div class="footer" style="width: 100%; height: 40px; background-color: #00b3ee">
    <ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; ">
        <li style="float: left; border-right:1px solid #bbb; overflow: hidden;">
            <a href="#" style="display: block;color: white;text-align: center; padding: 10px 10px; text-decoration: none;">item-1 <i class="fa fa-bell" style="display: block;"></i></a>
        </li>
        <li style="float: left; border-right:1px solid #bbb; overflow: hidden;">
            <a href="#" style="display: block;color: white;text-align: center; padding: 10px 10px; text-decoration: none;">item-1 <i class="fa fa-cog" style="display: block;"></i></a>
        </li>
    </ul>
</div>

It should be said that you'll be better off by putting all of you're styling code in a CSS stylesheet as inline styling is bad practice in most cases.

Answer 3

Please set the below to respective elements: div - width=20%; height=100px; width=20%; height=100px; remove float-left from li

It works fine in chrome.