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

我有一个包含图片的框架，我想在其左侧和右侧添加2个按钮，以便用户可以点击这些按钮查看不同的图片。我可以处理JavaScript，但我无法找到将这两个按钮对齐到正确位置的方法。谢谢。如何对齐div左右中间的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>

来源

2017-03-01 Louis Tran

你在正确的轨道上，但需要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>

来源

2017-03-01 20:25:39

尽管接受的答案有效，但这应该是我接受的答案，恕我直言，因为它遵循OP最初使用的“flexbox”和flexbox属性。 – hungerstar

你可能想要把按钮在框架内，所以你可以参考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/

来源

2017-03-01 20:19:46

谢谢你，完美的作品。答案将在3分钟后被接受。 –

@LouisTran，还要确保'.frame'具有'position：relative;'设置为Suthan Bala所做的。否则，左右按钮将自己对准其他祖先元素。添加'position：relative;'确保它们位于'.frame'内。这就是如果你打算不使用flex。否则，请使用Justin Taddei的答案。 – hungerstar

@LouisTran另外，'position：relative;'和'display：flex'一起在iOS上无法正常工作，并且稍后会破坏布局的其他部分。除了'display：flex'外，你最好不要使用任何东西，请参阅我的答案以获取更多详细信息。 –

首先，你可以设置帧R的位置。 elative所以它被设置为以下定位的根。然后，您可以将两个按钮的位置都设置为“绝对”，并将它们放在帧中，以便它们脱离文本流。通过将这两个属性设置为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>

来源

2017-03-01 20:26:21 KevDev

对不起，有些东西在粘贴时变坏了，我只是编辑它。 – KevDev

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

回答

相关问题