在保持垂直對齊的同時不會損失垂直對齊的水平對齊

在HTML中，我有兩個元素，一個包含文本，另一個包含幾個按鈕。在保持垂直對齊的同時不會損失垂直對齊的水平對齊

而是在中間的接觸，我希望他們分開，調整到左，右頁邊距。所以我希望我的文本與左邊距對齊，並且我的按鈕與右邊距對齊，而不會丟失其垂直對齊，因爲。

我還碰巧使用引導3.

當我使用pull-left/pull-right，float:left/float:right，或align="left"/align="right"，我得到了這兩個元素的垂直取向的變化。

配對下來的代碼看起來像這樣主要爲：

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

什麼是最直接的方式來調整這些項目的左，右頁邊距？我可以用桌子做，但那不是理想的方式嗎？

[！[A模式範例] [2] [2]

來源

2017-05-02 BBaysinger

請發佈您的代碼，並複製當前屏幕截圖中的內容。 –

需要查看代碼 – ZimSystem

我添加了一個代碼示例。真的很簡單。挑戰在於保持左側和右側元素垂直對齊。 – BBaysinger

沒有看到你的代碼，我會用柔性佈局。 flex 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>

來源

2017-05-02 19:00:14

這個怎麼樣？

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

這會將您的區域分成兩列，其中右列的所有內容將右對齊，而不會影響元素本身的CSS。

來源

2017-05-02 19:03:11

在保持垂直對齊的同時不會損失垂直對齊的水平對齊

回答

相關問題