Bootstrap 4-带有按钮标签的中心文本 [英] Bootstrap 4 - center text with button label
问题描述
我想实现一个非常简单的目标:我有一行-文本左对齐,按钮右对齐.我希望文本与按钮的标签垂直对齐.我尝试使用填充,边距等功能,但是没有任何效果.我相信我缺少一个简单而智能的解决方案.
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.
柱塞演示:
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>
感谢您的回答.
推荐答案
Bootstrap 4基于flexbox,因此已经具有用于应用这些对齐实用程序的类. d-flex
使该容器成为伸缩容器,而align-items-center
使该容器垂直对齐.尝试类似的东西:
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-带有按钮标签的中心文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!