php - 面板中的垂直居中 Bootstrap 右对齐按钮

Question

我有一个 Bootstrap 面板，需要一个在面板中右对齐且垂直居中的按钮 - 我很难过。我在 XAMPP 上使用 Laravel 5.5 PHP。

我可以右对齐它，但它会粘在右下角。我在这里尝试了很多垂直对齐的建议，但只要我成功地垂直对齐，我就会失去右对齐。我试过 text-align:right 而不是 float:right，我试过 display:inline-block，display: flex 和 align-self:center，都无济于事。

这是我的右对齐代码，但按钮位于底部且部分位于面板之外。

 <div class="col-md-6">
    <div class="panel panel-default" >
        <div class="panel-heading" style="background-color:#f37735;color:white"><h3><b>Employment History</b></h3>
        <button class="btn btn-primary" type="button" style="float:right;" data-toggle="collapse" data-target="#collapseEmployment" aria-expanded="false" aria-controls="collapseEmployment">
            Show Items
        </button>
        </div> .....

这是我所拥有的照片。红色箭头是我需要放置按钮的地方。 button placement 欢迎提出任何建议 - 谢谢。

Answer 1

只需将按钮放在页眉内即可。

<div class="col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading" style="background-color:#f37735;color:white"><h3><b>Employment History</b>
        <button class="btn btn-primary btn-sm" type="button" style="float:right;" data-toggle="collapse" data-target="#collapseEmployment" aria-expanded="false" aria-controls="collapseEmployment">
            Show Items
        </button>
        </h3>
        </div>
   </div>
</div>

演示 https://www.bootply.com/Z7RSrnEIYb