Question

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

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

Answer 1

<h2>的{{1}}更高，因为文字包装。删除Designers and Developers下的空<h2>并设置Charities（“设计师和开发者”的高度），一切似乎排好了。

Answer 2

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

Design div和Charity div有不同的高度（580和590）使它们都相同，按钮将变为相同，与文本本身相同。（如果你编码好了）

Answer 3

我在Charities div的第一个margin-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一样提供的网格系统。

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

4 个答案: