Выравнивание текста рядом с значками

Question

Итак, я пытаюсь выровнять эти изображения рядом друг с другом, но у меня возникают проблемы с этим.

Я пробовал вертикальное выравнивание, однако не удалось на нем!

HTML:

<ul class="ex-links"> 
    <li><i class="fa fa-users"></i><a href="">About Us</a></li> 
    <li><i class="fa fa-flag"></i><a href="">Events</a></li> 
    <li><i class="fa fa-picture-o"></i><a href="">Gallery</a></li> 
    <li><i class="fa fa-question-circle"></i><a href="">FAQ's</a></li> 
    <li><i class="fa fa-archive"></i><a href="">Archive</a></li> 
</ul> 

CSS:

.explore-links { 
     margin-right: 15px; 
    } 

    .ex-links { 
     padding: 5px; 
    } 

    .ex-links li { 
     font-size: 16px; 
     padding-bottom: 8px; 
    } 

Что показывает:

В принципе, я просто пытаюсь выровнять текст рядом с изображением (Что он показывает), но все они входят и выходят за линию. Размер значков - вот почему он это делает, поэтому мне было интересно, как я буду заниматься CSS, где он все выравнивается идеально, а не отступом для каждой строки li на основе значка.

Fiddle

спасибо!

Answer 1

Мой перейти к методу для вертикального выравнивания использует followng стилей:

.v-aligned-parent{ 
    position:relative;//Or absolute, just not static; 
} 
.v-aligned{ 
    position: absolute; 
    top:50%; 
    left: 0%; 
    transform:translate(0%, -50%); 
    -webkit-transform:translate(0%, -50%); 
} 

Применительно к вашей скрипке (обратите внимание, я также переделана некоторые Прокладки):

https://jsfiddle.net/d5xgfkn8/

Answer 2

Вы можете использовать свойства дисплея table, table-row и table-cell

ul { 
    display: table; 
} 
li{ 
    display: table-row; 
} 
i, a{ 
    display: table-cell; 

} 
a{ 

    padding-left: 10px; 
} 

Оформить заказ DEMO