面板中的垂直居中引导右对齐按钮答案

【问题标题】：Vertically center bootstrap right-aligned button in a panel面板中的垂直居中引导右对齐按钮
【发布时间】：2018-01-29 08:35:07
【问题描述】：

我有一个引导面板，需要一个在面板中右对齐和垂直居中的按钮 - 我很难过。我在 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 非常欢迎任何和所有建议 - 谢谢。

【问题讨论】：

您使用的是 Bootstrap 4 还是 Bootstrap 3？
Laravel 在其中扮演了什么角色？
看起来像这样bootply.com/apKGNiEvXl？只需将按钮放在标题中即可。
感谢您的快速回复。我正在使用 AdminLTE，我相信使用的是 Bootstrap 3。引导存储库的标头引用未指定版本。有什么方法可以验证吗？此标记来自我的 Laravel 应用程序中的刀片模板。我提到了 Laravel，但我认为 Laravel 对此没有任何影响，因为正确的标记和 CSS 应该占上风。

标签： php css twitter-bootstrap

【解决方案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

【讨论】：

天啊，将按钮标签移动到 H3 中就可以了。谢谢你的长笛！我不确定为什么包含在标题标签中有效 - 但它确实有效。拯救我的生命！