html - 如何在div左右两侧的中间对齐2个按钮

我有一个包含图片的框架，我想在其左侧和右侧添加2个按钮，以便用户可以单击它们以查看不同的图片。我可以处理JavaScript，但无法找到将这2个按钮对齐到正确位置的方法。谢谢。

.frame {
  background: #e0e0e0;
  width: 300px;
  height: 350px;
  border: 1px solid #b9b9b9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  background: #FFF;
  width: 200px;
  height: 200px;
}

.btn {
  width: 15px;
  height: 20px;
}

.btnLeft {
  float: left;
  background: red;
}

.btnRight {
  float: right;
  background: blue;
}

<div class="frame">
  <div class="content"></div>
</div>
<div class="btn btnLeft"></div>
<div class="btn btnRight"></div>

最佳答案

您处在正确的轨道上，但需要justify-content: space-between;而不是justify-content: center;，并且需要将.btnLeft和.btnRight放在.frame中。

以下是justify-content的不同值的作用：



图片来自CSS-Tricks

.frame {
  background: #e0e0e0;
  width: 300px;
  height: 350px;
  border: 1px solid #b9b9b9;
  display: flex;
  justify-content: space-between; /* not center */
  align-items: center;
}

.content {
  background: #FFF;
  width: 200px;
  height: 200px;
}

.btn {
  width: 15px;
  height: 20px;
}

.btnLeft{
  background: red;
}

.btnRight {
  background: blue;
}

<div class="frame">
  <div class="btn btnLeft"></div>
  <div class="content"></div>
  <div class="btn btnRight"></div>
</div>

关于html - 如何在div左右两侧的中间对齐2个按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42541137/