Bootstrap 4 - 带有按钮标签的居中文本

问题描述

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

Plunker 演示:

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

<跨度>此文本应与提交"文本匹配</span><button type="button" class="btn btn-secondary float-right">提交</button>

感谢您的回答.

解决方案

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

<跨度>此文本应与提交"文本匹配</span><button type="button" class="btn btn-secondary ml-auto">提交</button>

I want to achieve a very simple goal: I have a line - text aligned to left and a button to right. And I want the text to be vertically aligned to button's label. I tried to play with padding, margins,... but nothing worked. I believe there is a simple and smart solution I am missing.

Plunker demo:

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>

Thank for your answers.

解决方案

Bootstrap 4 is based on flexbox, so already has classes for applying those alignment utilities. d-flex makes the container a flex container, and align-items-center does the vertical alignment. Try something like:

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

这篇关于Bootstrap 4 - 带有按钮标签的居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！