html - 如何在两个 DIV 之间对齐元素

Question

我的网站上有两个容器（Code for Good），其中包含一些元素。

如何制作文本段落，并且按钮在它们之间对齐？

Answer 1

因为文本换行，所以for<h2>更高。删除下面Designers and Developers的空白并设置（“设计师和开发人员”的高度），一切似乎都排好了。<h2>Charitiesheight: 80px

Answer 2

您的按钮位于 div 的同一位置，所以这不是问题。问题是整个 div 本身。

Design div 和 Charity div 有不同的高度（580 和 590） 使其两者相同，按钮将变得相同，与文本本身相同。（如果你编码得好）

Answer 3

我在 Charities divmargin-top:20px;中的第一个添加了一个p，一切似乎都完美对齐..

Answer 4

我建议使用 4 个 div：其中两个用于实际文本和细节。另外两个只是按钮的容器。为两个文本 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
}

如果你最终嵌套了两个大小固定的 div，你应该考虑使用表格，或者使用像Bootstrap提供的那样的网格系统。