Question

在可折叠的Bootstrap 3面板的面板标题adding chevrons之后，我试图让它们垂直居中。

这是面板标题的样子：

<div class="panel-heading">
  <h3 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseActivity1" class="collapsed">
      Truck maintenance<br />
      <small>Monday t/m Wednesday</small>
    </a>
  </h3>
</div>

正如您在此JSFiddle中所看到的，当标题由多行组成时，对齐方式并不完全正确。

Q1：如何在面板标题中垂直居中V形？似乎无法找到适用于多行和单行的解决方案。

Q2：如示例中所示，字幕的推荐HTML标记是什么？在h3下使用h4？

Answer 1

对于这些伪元素，绝对定位与CSS变换相结合通常是最佳选择

JSfiddle Demo

<强> CSS

.panel-heading a {
    text-decoration: none;
    display: block;
    position: relative;
}
.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    position: absolute;
    top:50%;
    left:100%;
    -webkit-transform:translate(-100%, -50%);
    transform:translate(-100%, -50%);
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}

转化为IE9及以上CanIUse.com，但可获得带负利润的回退。

垂直居中：在Bootstrap 3面板标题中的内容之后

1 个答案: