Bootstrap 4 - 带有按钮标签的中心文本答案

【问题标题】：Bootstrap 4 - center text with button labelBootstrap 4 - 带有按钮标签的中心文本
【发布时间】：2019-01-22 17:23:16
【问题描述】：

我想实现一个非常简单的目标：我有一行 - 左对齐的文本和右对齐的按钮。我希望文本与按钮的标签垂直对齐。我尝试使用填充，边距，......但没有任何效果。我相信我缺少一个简单而智能的解决方案。

Plunker 演示：

https://plnkr.co/edit/KwRF2uOmKc3aPFQW9DXn?p=preview

<div>
    <span>
        This text should match the "Submit" text
    </span>
    <button type="button" class="btn btn-secondary float-right">Submit</button>
</div>

感谢您的回答。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 4 基于 flexbox，因此已经有用于应用这些对齐实用程序的类。 d-flex 使容器成为弹性容器，align-items-center 进行垂直对齐。尝试类似：

<div class="d-flex align-items-center">
    <span>
        This text should match the "Submit" text
    </span>
    <button type="button" class="btn btn-secondary ml-auto">Submit</button>
</div>

【讨论】：