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

Question

I have a frame containing a picture, I would like to add 2 buttons on the left and right side of it so users can click on those to view different pictures. I can handle JavaScript but I can't figure out a way to align these 2 buttons in proper positions. Thank you.

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

Answer 1

You were on the right track but needed justify-content: space-between; not justify-content: center; and you needed to put .btnLeft and .btnRight inside .frame .

Here's what different values of justify-content do:

_{Image from 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> 

Answer 2

You may want to put the buttons inside the frame so you can reference the left and right positions. Then make those buttons position:absolute then set left and right position for each buttons

Code:

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

Updated fiddle: https://jsfiddle.net/y0ty7t80/3/

Answer 3

First you could set the position of the frame to relative so it gets set as a root for following positionings. You could then set the positions of the two buttons both to "absolute" and put them inside of your frame so they get taken out of the text flow. By setting both to a left/right property of 0 and a top property of 50% they get placed exactly in the middle of the frame. Heres an example of what i mean:

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