如何将元素居中并将元素定位到两侧

Question

如何将元素居中并将元素定位到两侧

3

我想要水平居中一个元素，并将其他元素放置在其两侧（但不包括它们在居中计算中）。我更喜欢使用纯CSS解决方案；最好不要使用脚本，除非是超级轻量级的。目前为止，这是我所能做到的最接近的结果： https://jsfiddle.net/stupid_genius/5c0xnqmb/5/ "左"和"右"元素应该触碰到居中的"X"元素的左侧和右侧，而不改变它的位置。有没有一种方法可以做到这一点？

期望结果的模拟：https://jsfiddle.net/stupid_genius/5c0xnqmb/3/

html, body {
    margin: 0;
    padding: 0;
}

#main {
    position: absolute;
    width: 100%;
    height: 100%;
    background: lightblue;
}

#centered {
    position: relative;
    margin: 0 auto;
    width: 500px;
    background: yellow;
}

#center {
    margin: 0 auto;
    width: 100px;
    text-align: center;
    background: gray;
}

#left,
#right {
    position: absolute;
    top: 0;
}

#left {
    /* right: calc(50% + 50px); */
    left: 0;
    width: 50px;
    background-color: green;
}

#right {
    /* left: calc(50% + 50px); */
    right: 0;
    width: 200px;
    background-color: red;
}

- Allen

1

有没有地方可以讨论这个问题的管理？它被关闭是因为重复，但实际上并不是。相关问题中的被接受答案明确违反了这个问题的条件。 - Allen

1

你的沮丧是正确的，@Allen。不幸的是，有时候感觉像 Stack Overflow 上到处都是过于热心的版主，他们没有仔细阅读问题，然后错误地将问题标记为重复。这是一个长期存在的问题，似乎已经深入到了 Stack Overflow 中。我已经投票重新打开了问题，还有其他人也这样做了。当足够多的人投票重新打开你的问题时，虚假的重复将会消失。 - Rounin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- koder613 · Accepted Answer

HTML：

<div id="main">
    <div id="centered">
        <div id="left">Left</div>
        <div id="center">&lt;---X---&gt;</div>
        <div id="right">Right</div>
    </div>
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
}

#centered{
  display: flex;
}
#left{
  background: green;
  flex-grow: 1;
}
#center{
  margin: 0 auto;
  background: yellow;
}
#right{
  background: pink;
  flex-grow: 1;
}

请查看JSFiddle。

这是否是您需要的？