Question

我有几个面板，其中包含面板工具，文本和带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/

修改，预期输出

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>

Answer 2

使用两个部门。给第一个div增加50％的宽度，并给出float：left属性。

   
.fifty{
  width:50%;
  float:left;
}

</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 class='fifty'>
                            <span><i class="fa fa-cogs"></i>Other Management</span>
                            </div>
                            <div>
                            <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>
<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 class='fifty'>
                            <span><i class="fa fa-cogs"></i> Today's Summary</span>
                            </div>
                            <div>
                            <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>

我刚为第一师加入了新的'五十级'。

Answer 3

/**You can try this css code this might helpful.**/
.panel .panel-heading {
  float: left;
}
.panel .panel-tools {
  text-align: center;
}

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

无论前一个元素长度如何，都将锚点与中心对齐

3 个答案: