ブートストラップボタン中央のテキストボタンラベル

Question

私は非常に簡単な目標を達成したいと思います：私は、行のテキストを左に、ボタンを右に揃えています。そして、私は、テキストをボタンのラベルに垂直に整列させたい。私は、パディング、マージン、と再生しようとした...しかし、何も働いた。私は欠けているシンプルでスマートな解決策があると信じています。

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> 

は、あなたの答えをありがとうございました。

Answer 1

ブートストラップ4はフレックスボックスをベースにしているので、すでにこれらのアライメントユーティリティを適用するためのクラスがあります。 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>