javascript - 如何将 anchor 与中心对齐，而与先前的元素长度无关

我只有几个面板，其中包含面板工具，文本和带有fa的锚点。现在，我想保持锚点居中，而不能那样做。

如果我将锚保持在新的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/

编辑，预期输出

最佳答案

.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>