センターのコンテンツ、彼らはページの中央になるように

Question

私はここにいくつかのアライメントの問題をクリーンアップしようとしています...

することができますように、下矢印があります中心に置かれていなくても...

私はアイテムが矢印の左側に浮かんでいますが、その幅は矢印の右側に浮いています。

結果として矢印は中心から外れている...ここで

はフィドル

http://jsfiddle.net/6jSFY/292/

私のコード

/*bottom toolbar*/ 
    .bottom-toolbar { 
     height: 60px; 
     background: #292B2C; 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     color: #ffffff; 
     padding-left: 15px; 
     padding-right: 15px; 
     z-index: 2; 
    } 
    .toolbar-item { 
     display: inline-block; 
     line-height: 60px; 
     padding:0 20px 0 20px ; 
     transition: background 0.2s ease 0s; 
    } 

    .toolbar-item:hover { 
     cursor: pointer; 
     background: #747677; 
     bottom: 10px; 
    } 
    .toolbar-group { 
     display: inline-block; 
     margin-right: 30px; 
     border-right: 1px solid #393B3C; 
    } 

<!-- footer toolbar --> 
     <div class="bottom-toolbar text-center"> 
      <div class="pull-left"> 
       <span class="toolbar-item">Slide 1/3</span> 
      </div> 

      <div class="toolbar-item"> 
       <i class="fa fa-arrow-left"></i> 
      </div> 
      <div class="toolbar-item"> 
       <i class="fa fa-arrow-right"></i> 
      </div> 

      <div class="pull-right"> 
       <div class="toolbar-group"> 
        <div class="toolbar-item"> 
         <i class="fa fa-check text-success"></i> 
        </div> 
        <div class="toolbar-item"> 
         <i class="fa fa-times text-danger"></i> 
        </div> 
       </div> 
       <div class="toolbar-item"> 
        00:00 
       </div> 
      </div> 
     </div> 
     <!-- end footer toolbar --> 

です

質問：

彼らは死に関係なく、隣接するアイテムの幅のページにありますように、矢印を中心にする方法はありますか？

Answer 1

ここに行きます。 Codepen

考え中央.toolbar-item使用ブロックセンタリング用

、例えばwith:あなたの矢印の幅とmargin: 0 auto;フロートと中央 divのための

Answer 2

http://jsfiddle.net/6jSFY/293/

用表示部は、左と右のhtmlの中央よりも上方にある必要があり、現在は以下のコードを言及した微

<div class="bottom-toolbar"> 
        <div class="pull-left"> 
         <div class="toolbar-item"> 
11111 
         </div> 
        </div> 
        <div class="pull-right"> 
         <div class="toolbar-item"> 
2222222 
         </div> 
         <div class="toolbar-item"> 

         </div> 
        </div> 
        <div class="center"> 
         <div class="toolbar-item text-center"> 
ASDADASDASD 
         </div> 
        </div> 

       </div> 

Answer 3

が親切に確認して取り組んでいます。賢いです

HTML

<div id="container"> 
<div id="left"></div> 
<div id="center"></div> 
<div id="right"></div> 
</div> 

スタイル

#container { 
    width:100%; 
    text-align:center; 
    } 

#left { 
    float:left; 
width:100px; 
height: 20px; 
background: #ff0000; 
} 

#center { 
display: inline-block; 
margin:0 auto; 
width:100px; 
height: 20px; 
background: #00ff00; 
} 

#right { 
float:right; 
width:100px; 
height: 20px; 
background: #0000ff; 
}