面板中的垂直中心引导右对齐按钮

Question

I have a bootstrap panel and need a button right-aligned and vertically-centered in the panel - I'm stumped. I'm working in Laravel 5.5 PHP on XAMPP.

I can right-align it but it sticks to off the bottom right corner. I have tried many suggestions here to vertically align it, but anytime I succeed with the vertical alignment I lose the right-alignment. I have tried text-align:right instead of float:right, I've tried display:inline-block, display:flex and align-self:center, all to no avail.

Here's my code that right-aligns, but the button is placed to the bottom and partially outside of the panel.

 <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> .....

Here's a pic of what I have. The red arrow is where I need to place the button. button placement Any and all suggestions are most welcome - thanks.

Answer 1

just put the button inside the header.

<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>

DEMO https://www.bootply.com/Z7RSrnEIYb