我能使用“auto”值与“calc()”属性吗？

Question

我想使用calc()将margin设置为auto加上一些像素，但是我的代码似乎无法正常工作。

selector {
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    background: red;
    margin: calc(auto + 5px);
}

<div></div>

我能把calc()设置为自动边距再加上一个固定值吗？就像这样：

- Bhojendra Rauniyar

---

我尝试通过定义百分比来解决，但由于我的div可能较小或较大，它不起作用。 - Bhojendra Rauniyar

希望将margin设置为auto并将translateX设置为-5px可以解决问题，我相信。 - vssadineni

@vssadineni 这个问题基本上涉及到一些百分比计算，所以我在我的答案中都用到了。 - Bhojendra Rauniyar

Answer 1

今天看到自己的问题，感到羞愧为什么不能正确地思考它？基本上，自动边距是左边距50%减去div宽度。在此基础上，我们可以像这样布局元素：

margin-left: calc(50% + 5px);
transform: translateX(-50%);

使用前面的代码等同于calc(auto + 5px);。由于calc不支持auto，我们需要使用实际的转换概念进行欺骗。这意味着我们也可以使用绝对位置布局并采用50% - half of width的概念，但我喜欢在这里使用transform以保持简单。

请查看下面的演示:

.parent{
  position: relative;
}
.child{
  border: 2px solid green;
  width: 25%;
  height: 50px;
  margin: 10px auto;
}
.right{
  margin-left: calc(50% + 20px);
  transform: translateX(-50%);
}
.left{
  margin-left: calc(50% - 20px);
  transform: translateX(-50%);
}
#border{
  height: 100%;
  border: 1px solid yellow;
  width: 25%;
  margin: auto;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
}

<div class="parent">
  <div id="auto" class="child">
    auto margin
  </div>
  <div id="auto-right" class="child right">
    auto + pushed to right
  </div>
  <div class="child left">
    auto + pushed to left
  </div>
  <div id="border"></div>
</div>

增加或减少左右加减值以正确理解。

注意：使用以下代码:

.right{
  margin-left: calc(50% + 20px);
  transform: translateX(-50%);
}

与使用相同：

.right{
  margin-right: calc(50% - 20px);
  transform: translateX(-50%);
}

就这个概念而言。

还要注意，问题与一些百分比计算加减所需的偏移量有关。因此在这个答案中，既使用了calc又使用了transform。如果您确切地需要在中间进行偏移，则可以只使用（无需margin-left或margin-right）：

transform: translateX(-20px)

答案是使用50%的计算，但问题要求使用类似于calc(20% - 20px)的一些百分比。

- Bhojendra Rauniyar

Answer 2

从MDN：

calc() CSS 函数可用于要求 <length>、<frequency>、 <angle>、<time>、<number> 或 <integer> 的任何地方。使用 calc()，您可以进行计算以确定 CSS 属性值。

在那里您不能使用auto，因为它不是calc()的有效值。

calc()的语法

term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function | math
  ;

如需更多信息，请参考文档

---

根据您的评论，您希望将 div 居中，并在右侧留有 5px 的 margin，可以通过在父元素上使用 text-align: center; 并使子元素的 div 元素为 display: inline-block; 来实现。

演示

输出

div.wrap {
    text-align: center;
}

div.wrap div {
    display: inline-block;
    height: 100px;
    width: 100px;
    color: #fff;
}

div.wrap div.with_margin {

    margin-right: 5px;
    background: #f00;
}

div.wrap div.without_margin { 
    background: #000;
}

- Mr. Alien

---

哦！这里还有一个函数。我该如何使用它来使其自动加上5像素？ - Bhojendra Rauniyar

@C-link 这没有任何意义，当你在右侧添加 5px 的 margin 时，它怎么可能是自动的呢？你能展示一种代表性的方式，来说明你的期望吗？ - Mr. Alien

请尝试理解比较这些演示：http://jsfiddle.net/jP7mN/1/ http://jsfiddle.net/jP7mN/2/。它将设置margin-right为25％，无论div的宽度如何，但我希望它的行为像两侧都是自动的，但右侧增加一些宽度间距。 - Bhojendra Rauniyar

Answer 3

我刚通过搜索偶然发现了这个。虽然看起来有点复杂。为什么不分离，在div中使用margin auto，然后将元素内部的margin left？像这样：
HTML:

 <div class="centered">
   <div>Some sort of element here</div>
 </div>

CSS：

.centered {
  margin: auto;
 }
.centered:first-child {
  max-width: 100%;
  margin-left: -2%;
 }

- Patrick_B

---

OP四年前自己的回答已经使用了这种方法。 - TylerH