マージンに対する水平方向の整列が垂直方向の整列を失うことはありません

Question

HTMLでは、2つの要素、1つはテキスト、もう1つはボタンを含みます。代わりに、真ん中に触れるの

、私は彼らが左右の余白に整合するように間隔を置いて配置します。だから私のテキストは、左の余白に揃えて、私のボタンはのように、垂直の配置を失うことなく、右の余白に揃えてください。私はpull-left/pull-right、float:left/float:right、またはalign="left"/align="right"を使用する場合

私も

ブートストラップ3を使用することが起こる、私はこの2つの要素の垂直方向の配置の変更を取得します。

ダウンペアのコードは、この基本的に次のようになります。

<div style="width:200px;height:100px"> 
    Delete dashboard? 
    <button class="btn btn-secondary cancel"> 
     Cancel 
    </button> 
    <button class="btn btn-danger"> 
     Delete 
    </button> 
</div> 

左右の余白に、これらのアイテムを揃えるための最も簡単な方法は何ですか？私はテーブルでそれをすることができますが、それは理想的な方法ではありませんか？

[！[モーダル例] [2] [2]

Answer 1

あなたのコードを見てなければ、私はフレックスレイアウトを使用します。フレックスのキーrowは、justify-content: space-betweenを使用して、行内の2人の子供を遠端に押し込むことです。親のalign-itemsは、垂直方向の配置を設定します。これについて

.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
    max-width: 250px; 
 
    border: 1px solid black; 
 
} 
 
.bot { 
 
    border-top: 1px solid #ccc; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<div class="flex col"> 
 
    <div> 
 
    <h1>confirm</h1> 
 
    </div> 
 
    <div class="flex bot"> 
 
    <p>delete dashboard</p> 
 
    <div> 
 
     <button>cancel</button> 
 
     <button>delete</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

何？

<div class="row"> 
    <div class="col-md-6">Dashboard</div> 
    <div class="col-md-6 text-right">Cancel Delete</div> 
</div> 

これは、右の列のすべてのコンテンツは、要素自体のCSSに影響を与えずに、右に整列される2つの列にお住まいの地域を分割します。