如何垂直居中文本和列表组标题中的按钮？

Question

我在列表组中有以下标题

 

.list-group-header{
  border: solid black 1px;
}

button{
  height: 50px;
} 

<div class="list-group-header clearfix">
  <div class="pull-left">
  Open Issues
  </div>

  <button class="pull-right">
  New Issue
  </button>
</div>

我想要一种垂直对齐标题的引导方式＆＃34; Open Issues＆＃34;使用按钮

Answer 1

您可以设置 行高 ：

＆＃13;

＆＃13;

.list-group-header{
  border: solid black 1px;
}

.pull-left {
  line-height: 50px;
}
button{
  height: 50px;
}

＆＃13;

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


<div class="list-group-header clearfix">
    <div class="pull-left">
        Open Issues
    </div>

    <button class="pull-right">
        New Issue
    </button>
</div>

＆＃13;

＆＃13;

＆＃13;