Html 如何在父div中对齐3个子div

我想水平对齐3个不同的子div。 这3个div包含1个图像（高度和宽度为px）。每个div上都有一个悬停的链接（但我希望onmouseover只在图像上，而不是div中剩余的空间上）。 所以我不想让我的div占据屏幕的33%

但是我希望我的左图像完全在屏幕的左侧，我的中心图像在中间，我的第三个图像完全在屏幕的右侧

我的父div是绝对的，而子div与float是相对的（我不知道这是好事还是坏事）

我的例子如下：

我的HTML：

<div class="controls">
    <div class="controls_prev"></div>
    <div class="controls_toggle"></div>
    <div class="controls_next"></div>
</div>`

->我的右div位置不正确

---

如何做到这一点？

我会做以下几点

使用绝对定位将

.controls\u prev

放置在左侧，将

.controls\u next

放置在右侧

保持

.controls\u在常规流程中切换

，并使用

边距：0自动

将其居中。这很好，因为

.controls\u prev

和

.controls\u next

的宽度相同

.controls{
位置：绝对位置；
宽度：100%；
高度：100px；
最高：50%；
利润上限：-37像素；
显示：块；
边框：1px点蓝色；
}
.controls_prev{
不透明度：0.6；
位置：绝对位置；
宽度：78px；
高度：100px；
顶部：0px；
左：0px；
边框：实心1px#40b2d6；
}
.控制开关{
不透明度：0.6；
宽度：78px；
高度：100px；
保证金：0自动；
边框：实心1px#40b2d6；
}
.下一步{
不透明度：0.6；
位置：绝对位置；
宽度：78px；
高度：100px；
顶部：0px；
右：0px；
边框：实心1px#40b2d6；
}

---

对列表的更改太多，但这应该可以工作。请注意标记的重新排序

.controls{
位置：绝对位置；
最高：50%；
右：0；
底部：0；
左：0；
利润上限：-37像素；
背景：ddd；
}
.controls_prev{
不透明度：0.6；
位置：相对位置；
宽度：78px；
高度：100px；
浮动：左；
边框：实心1px#40b2d6；
}
.控制开关{
不透明度：0.6；
位置：相对位置；
宽度：78px；
高度：100px；
保证金：0自动；
边框：实心1px#40b2d6；
}
.下一步{
不透明度：0.6；
位置：相对位置；
宽度：78px；
高度：100px；
浮动：对；
边框：实心1px#40b2d6；
}

---

我更新了您的小提琴，将每个div的display设置为table单元格，并将display:table添加到容器中。这就是你想要的吗

CSS:

HTML:

左边
这是中心
正确的

为了实现这一点，我将使用一个表，因为它非常有用。如果您将表格宽度设置为100vw（屏幕的100%），并根据需要使用百分比

.controls{
位置：绝对位置；
宽度：100vw；
高度：100px；
最高：50%；
利润上限：-37像素；
显示：块；
表布局：固定；
}
.controls_prev{
不透明度：0.6；
宽度：20vw；
高度：100px；
顶部：0px；
左：0px；
边框：实心1px#40b2d6；
}
.控制开关{
不透明度：0.6；
宽度：20vw；
高度：100px；
顶部：0px；
左：0px；
边框：实心1px#40b2d6；
}
.下一步{
不透明度：0.6；
宽度：20vw；
高度：100px；
顶部：0px；
右：0px；
边框：实心1px#40b2d6；
}
.控制分离{
宽度：20vw；
}

试试这个

.controls{
位置：绝对位置；
宽度：100%；
高度：100px；
最高：50%；
利润上限：-37像素；
显示：表格；
表布局：固定；
}
.对齐{
显示：表格单元格；
垂直对齐：顶部；
宽度：100%；
填充：3px；/*仅用于显示*/
}
.内部{
边框：实心1px#40b2d6；
不透明度：0.6；
高度：100px；
}

具有明确的左右宽度，div中没有内容。我尝试了这个解决方案，但它对我不起作用；（谢谢你的帖子我尝试了另一个解决方案我尝试了这个解决方案，效果很好！！我不明白为什么重新排序有效…非常感谢！浮动元素根据其标记顺序采取垂直位置。你希望它们的顺序刚好在它们应该对齐的非浮动元素之前。谢谢你的回复，我不这么认为要知道！这个解决方案在fiddle中非常有效！没问题，如果它对您有用，您可以接受答案

.controls {
    position:absolute;
    width:100%;
    height:100px;
    top:50%;
    margin-top:-37px;
    display:block;
}
.controls_prev {
    opacity: 0.6;
    position:relative;
    width:78px;
    height:100px;
    float:left;
    border: solid 1px #40b2d6;
}
.controls_toggle {
    opacity: 0.6;
    position:relative;
    width:78px;
    height:100px;
    margin:0px auto !important;
    border: solid 1px #40b2d6;
}
.controls_next {
    opacity: 0.6;
    position:relative;
    width:78px;
    height:100px;
    float:right;
    border: solid 1px #40b2d6;
}

.controls{
    position:absolute;
    width:100%;
    height:100px;
    top:50%;
    margin-top:-37px;
    display:table;
}

.controls_prev{
    display:table-cell;
    opacity: 0.6;
    height:100px;
    border: solid 1px #40b2d6;
}

.controls_toggle{
    display:table-cell;
    opacity: 0.6;
    height:100px;
    top:0px;
    left:0px;
    border: solid 1px #40b2d6;
}

.controls_next{
    display:table-cell;
    opacity: 0.6;
    height:100px;
    border: solid 1px #40b2d6;
}

<div class="controls">
    <div class="controls_prev">left</div>
    <div class="controls_toggle">this is the center</div>
    <div class="controls_next">right</div>
</div>