HTML

Question

我想在这里清理一些对齐问题......

尽可能地，底部箭头不会居中，也可能是......

我有一个项目浮动到箭头的左边，宽度为;然后项目浮动到箭头的右边。

结果箭头偏离中心......

这是小提琴

我的代码

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

Answer 2

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

use display block for center div with float left and right should be upper than center in html and now working fine

<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

kindly check with below mentioned code.

HTML

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

Style

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

左浮动项和右浮动项之间的中心内容，以便它们是页面的中心

3 个答案:

HTML

Style