我试图清理这里的一些对准问题的中心......中心内容，使他们在页面

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

我有一个项目漂浮在箭头左侧的宽度是;然后项目漂浮在箭头的右侧。

的箭头，结果是偏离中心......

这里是小提琴

我的代码

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

风格

相关问题