Question

我一直试图将某个按钮对准div的水平中心，但与我所拥有的所有其他按钮不同，这个按钮不会忽略我上方的照片div并被推到一边。 The button I am talking about is the one in the center titled "Learn How"

.button2 {
  background-color: #E0E5E9;
  border: 1px solid #e76d6a;
  color: #e76d6a;
  padding: 15px 32px;
  font-size: 16px;
  margin: auto;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  display: block;
  text-align: center;
}

.button2:hover {
  background-color: #e76d6a;
  /* Orange */
  color: white;
}

<div id="page1">
  <div class="page1image">
    <h2>Leadership</h2>
  </div>
  <h3 class="page1head">Our Purpose.</h3>
  <p class="page1content">Simply invest in disruptive ideas and the people behind them. Seed-stage companies aiming to break ground are having difficulty accessing capital in developed markets. Our team is ready to have that discussion and happy to provide thought leadership,
    advising start-ups on how to grow business.</p>
  <button class="button">Let's Talk.</button>
</div>
<div id="page2">
  <h3 class="page2head">Our Ability to Navigate</h3>
  <p class="page2content">Extinguish the 'burn rate' with planned trajectory. 5Lion leverages existing relationships in the U.S. and other mature economies providing real growth to new companies while navigating risk and redefining markets. Traditional integrity meets New Age
    principles.</p>
  <button class="button2">Learn How</button>
</div>

我尝试过position：absolute，display：block，display：inline-block，width：100％，以及对它没有任何影响的各种东西。

我没有看到按钮与上面的照片div碰撞会出现什么问题。就像在这张图片中一样。

The margin of the button collides with the margin of the image above

我希望这不是一个我还没有尝试过的简单的解决方案。

无法将按钮对齐div

0 个答案: