如何對齊兩個DIV之間的元素

Question

我的網站上有兩個容器（Code for Good），其中有幾個元素。

如何製作文本段落和按鈕之間的對齊？

Answer 1

<h2>對於Designers and Developers更高，因爲文本換行。刪除空的<h2>是在Charities和設置height: 80px（「設計師和開發人員」的高度），一切似乎排隊沒關係。

Answer 2

您的按鈕位於div的相同位置，所以這不是問題。 問題是整個div本身。

Design div和Charity div具有不同的高度（580和590） 使它們都相同，並且按鈕將變得與文本本身相同。 （如果你已經編碼好了）

Answer 3

我在慈善的div添加了一個margin-top:20px;到第一p，一切似乎完全一致..

Answer 4

我會建議使用4個格：他們兩個是實際的文字和細節。另外兩個只是你的按鈕的容器。爲兩個文本div設置一個固定的高度。

<div id="left"> 
    <div class="text"> 
    <h2>Caption 1</h2> 
    <p>Details are here</p> 
    </div> 
    <div class="button_container"> 
    <div>Button</div> 
    </div> 
</div> 
<div id="right"> 
    <div class="text"> 
    <h2>Caption 2</h2> 
    <p>Details are here, and are much longer than the ones in the first div so that the text wraps.</p> 
    </div> 
    <div class="button_container"> 
    <div>Button</div> 
    </div> 
</div> 

CSS：

#left, #right { 
    width : 50%; 
} 

.text { 
    height: 400px; // Or any fixed size that makes sense 
} 

如果您最終嵌套兩個many的div固定的大小，你應該考慮使用表格，或使用網格系統一樣具備Bootstrap之一。