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

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

这里有justify-content的不同值：

_{来自CSS-Tricks}

的图片

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可能希望将按钮放在框架内，以便引用left和right位置。然后制作这些按钮position:absolute，然后为每个按钮设置left和right位置

代码：

.frame {
  background: #e0e0e0;
  width: 300px;
  height: 350px;
  border: 1px solid #b9b9b9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.btn{
  position: absolute;
  top: 50%;
  transform:translateY(-50%);
}
.btnLeft{
  left: 0;
}
.btnRight{
  right: 0;
}

更新小提琴： https://jsfiddle.net/y0ty7t80/3/

Answer 3

首先，您可以将帧的位置设置为相对，以便将其设置为后续定位的根。然后，您可以将两个按钮的位置设置为“绝对”，并将它们放在框架内，以便将它们从文本流中取出。通过将左侧/右侧属性设置为0并将顶部属性设置为50％，它们恰好位于帧的中间。这是我的意思的一个例子：

.frame {
  position:relative;
  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{
  position:absolute;
  top:50%;
  left:0;
  background: red;
}

.btnRight {
  position:absolute;
  top:50%;
  right:0;
  background: blue;
}

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