div内の左と右の矢印アイコン

Question

ページの下部にあるフッターに前後に2つのアイコンを配置し、その間に10ピクセルのスペースを入れたいとします。

2つのアイコンは、同じ垂直レベルにあり、一緒に水平に中央に配置する必要があります。 どうすればいいですか？

<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

水平にセンタリングされたコンテナを作成し、そこに配置します。 2つのアイコンが一緒にスクリーンよりも大きくない限り、それらは並んで表示されます。それらの間の10pxののスペースを作成するには、このような最初の要素の右側に余白を追加することができます。

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

アイコンでspanタグを交換してください。

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>