我試圖清理這裏的一些對準問題的中心......中心內容，使他們在頁面

就可以了，底部箭不居中，以及可能是...

我有一個項目漂浮在箭頭左側的寬度是;然後項目漂浮在箭頭的右側。

的箭頭，結果是偏離中心......

這裏是小提琴

我的代碼

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

問：

有沒有辦法居中箭頭，讓他們都死了中心在頁面上不管相鄰項的寬度？

來源

2017-03-02 Jethro Hazelhurst

你在這裏。 Codepen

的想法：

中央.toolbar-item使用塊定心，例如with:你的箭頭寬度和margin: 0 auto;離開中心 DIV與浮子

來源

2017-03-02 23:22:52 disstruct

天哪那就是聰明！ –

不那麼糊塗，但tnx。另請注意''.dull-right'在'.center'塊之前 – disstruct

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>

來源

2017-03-02 23:33:30

麻煩與檢查下文提到的代碼。

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

來源

2017-03-02 23:35:17 Sridhar

中心內容，使他們在頁面

回答

HTML

風格

相關問題