垂直对齐面板标题中的跨度

Question

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

这是我到目前为止所尝试的。

.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 来更轻松地实现此目的。

另外值得注意的是，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>