具有中心偏移的 css calc

Question

这是我正在尝试的

我在中心有一个元素，我想留在中心。现在我想要一个元素来拥抱这个元素的左侧。

所以实际上我想要左边 div 最左边的位置是 right:calc(50%-200px-(lefts width));

我的问题是做得对：50%；做了一些事情但 right:calc(50% +100px) 没有。

我怎样才能让左边的 div 总是拥抱中间的那个人？

 <div class="left"> hug this center element </div>
<div class="middle"> this stays in the middle</div>

原文由 Frank Visaggio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下工作 - 将您的 HTML 调整为此：

 <div class="middle"> this stays in the middle
    <div class="left"> text here </div>
</div>

更改您的 CSS .left

 .left {
    position: relative;
    right: 60px; //adjust this to change left-right position of the .left div
}

JS 小提琴演示

原文由 Dan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

left: 50%; /* align center */
margin-left: -30px;  /* your element width / 2 when element = 60px */

原文由 Abdo-Host 发布，翻译遵循 CC BY-SA 4.0 许可协议