javascript - 无论先前的元素长度如何，如何将 anchor 对齐到中心

Question

我有几个面板，其中包含面板工具、文本和带有 fa 的 anchor 。现在我想让 anchor 居中，但无法做到这一点。

如果我将 anchor 保留在新的 div 中，则新的 div 会被下推。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10">
    <div class="panel-body">
        <div class="panel-group">
            <!--Panel 1 -->
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a data-toggle="collapse" href="#1" aria-expanded="false">
                            <i class="glyphicon glyphicon-arrow-down"></i>
                        </a>
                    </div>
                    <div>
                        <span><i class="fa fa-cogs"></i>Some Archive Management</span>
                        <a class="btn btn-sm btn-info text-center">
                            <i class="fa fa-bar-chart text-primary"></i> Show Graph
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-10">
    <div class="panel-body">
        <div class="panel-group">
            <!--Panel 3 -->
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a data-toggle="collapse" href="#3" aria-expanded="false">
                            <i class="glyphicon glyphicon-arrow-down"></i>
                        </a>
                    </div>
                    <div>
                        <span><i class="fa fa-cogs"></i>Other Management</span>
                        <a class="btn btn-sm btn-info text-center">
                            <i class="fa fa-bar-chart text-primary"></i> Show Graph
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-10">
    <div class="panel-body">
        <div class="panel-group">
            <!--Panel 24 -->
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a data-toggle="collapse" href="#24" aria-expanded="false">
                            <i class="glyphicon glyphicon-arrow-down"></i>
                        </a>
                    </div>
                    <div>
                        <span><i class="fa fa-cogs"></i> Today's Summary</span>
                        <a class="btn btn-sm btn-info text-center">
                            <i class="fa fa-bar-chart text-primary"></i> Show Graph
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/xos71g5v/

编辑，预期输出

Answer 1

.panel-heading div {
  display: inline-block;
  vertical-align: middle;
}
.panel div span {
  display: inline-block;
  width: 180px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10">
    <div class="panel-body">
        <div class="panel-group">
            <div class="panel">
                    <div class="panel-heading">                       
                        <div class="panel-tools">
                            <a data-toggle="collapse" href="#1" aria-expanded="false">
                                <i class="glyphicon glyphicon-arrow-down"></i>
                            </a>
                        </div>
                        <div>
                            <span><i class="fa fa-cogs"></i>Some Archive Management</span>
                            <a class="btn btn-sm btn-info text-center">
                                <i class="fa fa-bar-chart text-primary"></i>
                                Show Graph
                            </a>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
<div class="col-md-10">
    <div class="panel-body">
        <div class="panel-group">
            <div class="panel">
                    <div class="panel-heading">                       
                        <div class="panel-tools">
                            <a data-toggle="collapse" href="#3" aria-expanded="false">
                                <i class="glyphicon glyphicon-arrow-down"></i>
                            </a>
                        </div>
                        <div>
                            <span><i class="fa fa-cogs"></i>Other Management</span>
                            <a class="btn btn-sm btn-info text-center">
                                <i class="fa fa-bar-chart text-primary"></i>
                                Show Graph
                            </a>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
<div class="col-md-10">
    <div class="panel-body">
        <div class="panel-group">
            <div class="panel">
                    <div class="panel-heading">                       
                        <div class="panel-tools">
                            <a data-toggle="collapse" href="#24" aria-expanded="false">
                                <i class="glyphicon glyphicon-arrow-down"></i>
                            </a>
                        </div>
                        <div>
                            <span><i class="fa fa-cogs"></i> Today's Summary</span>
                            <a class="btn btn-sm btn-info text-center">
                                <i class="fa fa-bar-chart text-primary"></i>
                                Show Graph
                            </a>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>