Question

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

所以实际上我想要左侧div的最左侧位置是正确的：calc（50％-200px-（左手宽度））;

我的问题是正确的：50％;做的事情但是正确的：calc（50％+ 100px）没有。

我怎么能这样做，所以左派的div总是拥抱中心的那个人？

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

Answer 1

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

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

更改.left

的CSS

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

JS Fiddle Demo

Answer 2

这非常简单，但专注于单个图形或事件。更重要的是，它还解决了＆＃34; resize＆＃34;异常。因此代码开销很小。使用宽度为300px的图形，我们需要在方法中指出50％。因此：

     #imgone {
     left : calc (100% - 150px / 2);
     /* other code here*/;
     }

这个最重要的规则是确保＆＃34;白色空间＆＃34;在+或 - 之间以避免签名的数字。将该惯例用于乘法和除法是有用的。可以使用所有已识别的值属性（例如：px，pt，em等）。但是＆＃39; auto＆＃39;被浏览器区别对待并被排除在外。羞耻，有点前瞻性思维＆＃34;中心行：图像＆＃39; （原文如此）将是＆＃34; center-col：image＆＃34;（原文如此）的明显方法。太容易了，或许？

Answer 3

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

具有中心偏移的css计算

3 个答案:

JS Fiddle Demo