垂直对齐面板内的跨度 Header

Question

在面板手风琴中（在应用程序中使用 bootstrap 3.3.7），在面板 header 中，我需要在右上角显示一些内容和一个框。我想要的是将盒子项目对齐到右侧角的中间位置。我该怎么做。

这是我到目前为止尝试过的方法。

.mainBox {
  background-color: #00c0ef !important;
  color: white !important;
  padding: 5px 10px !important;
}

.lineBox {
  font-size: small;
  white-space: pre-line;
  align-content: center;
  vertical-align: middle;
}

.deleteBox {
  border: solid;
  border-width: 1px;
  padding: 5px, 5px;
  color: white !important;
  height: auto;
  width: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col-md-12">
    <div class="panel-group accordion-Queue" role="tablist" aria-multiselectable="true">

      <div class="panel panel-default">
        <div class="panel-heading mainBox" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                           
                            Collapsible Group Item #1
                           
                            
                            <span class="deleteBox pull-right">
                                <span>TAB DRAFT</span> 
                            </span>

                            <span class="lineBox">
                                Collapsible Group Item #1
                            </span>
                        </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
        </div>
      </div>

    </div>
  </div>
</div>

Answer 1

据我了解你的问题，你想垂直对齐右侧的 "TAB DRAFT" 框。

如果将元素移出 h4 标签，则通过在 .mainBox 上使用 flex 可以更轻松地实现此目的 class。

同样值得注意的是，vertical-align 仅适用于行内元素。

.mainBox {
  background-color: #00c0ef !important;
  color: white !important;
  padding: 5px 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lineBox {
  font-size: small;
  white-space: pre-line;
  align-content: center;
  vertical-align: middle;
}

.deleteBox {
  border: 1px solid white;
  color: white !important;
  text-align: center;
  display: table-cell;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <div class="col-md-12">
<div class="panel-group accordion-Queue" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading mainBox" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <span>
            Collapsible Group Item #1
          </span>
          <span class="lineBox">
            Collapsible Group Item #1
          </span>
        </a>
      </h4>

      <span class="deleteBox pull-right">
        <span>TAB DRAFT</span>
      </span>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
    </div>
  </div>

</div>
  </div>
</div>

垂直对齐面板内的跨度 Header

Vertical alignning a span within a Panel Header

html

css

twitter-bootstrap-3