Question

我有一个按钮需要放在div类ex的中心。 div =“ sanfrancisco-image”。它放置在距框底部17像素的位置，但是即使我放置了justify-self：center;，它也将显示在中间。和align-items：center;标签。

这是codepen链接：https://codepen.io/holmedw/pen/KrvJEb

  .btn {
  align-items: center;
  position: absolute;
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px black solid;
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  bottom: 17px;
  justify-self: center;
}

Answer 1

不需要align-items和justify-self。不确定它们是否有好处，因此请尝试将其删除。在按钮的CSS上？ =>设置以下内容：

margin: 0px auto 0px auto;

尝试一下，让我知道它是否有效。

Answer 2

获得所需内容的最快方法是将position: relative添加到.our-story-block, .our-dna-block, .sanfrancisco-block，然后添加新的div以包含button，例如{{1} }。将<div class="btn"><button>See More</button></div>设置为div，以便将绝对div置于相对元素内。您不再需要在position: absolute; bottom: 17px; width: 100%; left: 0; css类中包含这些值，只需删除它们即可。

.btn

如何在div类中居中放置按钮

2 个答案: