html - 垂直居中 :after content in Bootstrap 3 panel-heading

Question

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

这是面板标题的样子:

<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 中看到的那样，当标题由多行组成时，对齐方式不太正确。

问题 1:如何使面板标题中的人字形垂直居中？似乎找不到同时适用于多行和单行的解决方案。

问题 2:示例中推荐的字幕 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但可以使用负边距的回退。