CSS список элементов текста и выравнивания значков

Question

Я создаю список ul с свойствами css.

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

Это будет выглядеть так:

Но я хочу appearings текст и значок выровненную центр и один под другим.

Answer 1

Просто сделайте так:

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

Это должно установить значок над текстом в кнопке.

Answer 2

Чтобы сделать значки ниже текст, который вы должны стилизовать li элемент overflow: hidden и i к display: block, как это:

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

Надо сказать, что вы будете лучше, поставив все вы разрабатываете код стилей в стилях CSS, так как встроенный стиль - это плохая практика в большинстве случаев.

Answer 3

Пожалуйста, установите ниже соответствующие элементы: div - width=20%; height=100px; удалить float-left из li

Он отлично работает в хроме.