Значки влево и вправо со стрелками в центре div

Question

Я хочу разместить два значка для навигации назад и вперед в нижнем колонтитуле внизу страницы с пространством 10 пикселей между ними.

Эти две значки должны быть на одном и том же вертикальном уровне и вместе по горизонтали. Как я могу это сделать?

<div id="footer"> 
    <i id="left" class="fa fa-caret-left fa-5x"></i> 
    <i id="right" class="fa fa-caret-right fa-5x"></i>  
</div> 

Answer 1

Создайте контейнер для них, который центрирован по горизонтали и помещен туда. Пока два значка вместе не больше экрана, они будут показаны бок о бок. Для того, чтобы создать пространство 10px между ними вы можете добавить запас справа от первого элемента, как это:

<!-- website --> 
<div style="text-align: center"> 
    <span style="margin-right: 10px">ICON</span><span>ICON</span> 
</div> 
<!-- website --> 

Заменить тег пролетных с иконами.

EDIT: Я вижу, вы редактировали Ваш вопрос, с кода при условии, что должно быть достаточно, чтобы добавить «выравнивания текста: центр» в CSS для колонтитула и «Правое поле: 10px» в CSS для левого

Answer 2

Если вы используете display:table; для родительского элемента и display:table-cell; для дочерних элементов, вы можете выровнять их по горизонтали.

https://jsfiddle.net/3do9gvx3/1/

#footer{ 
 
    display:table; 
 
    background:red; 
 
    width:100%; 
 
    height:100px; 
 
} 
 
#footer i{ 
 
    padding: 5px; 
 
    height: calc(100% - 10px); 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#left{ 
 
    text-align:right; 
 
}

<div id="footer"> 
 
    <i id="left" class="fa fa-caret-left fa-5x">Test</i> 
 
    <i id="right" class="fa fa-caret-right fa-5x">Test</i>  
 
</div>