如何对齐两个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之一。