CSS 使用带有自动边距的 calc
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21275565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using calc with auto margin
提问by Bhojendra Rauniyar
I wanted to use margin-right to auto + some pixels by using css3 calc() but seems the statement is wrong.
我想通过使用 css3 calc() 使用 margin-right 来自动 + 一些像素，但似乎该语句是错误的。
selector{margin: calc(auto + 5px);
So, how can use so that it can take auto margin and plus fixed pixels margin?
那么，如何使用才能获得自动边距和固定像素边距？
Something like this!
像这样的东西！
采纳答案by Bhojendra Rauniyar
Looking at my own question today, I feel ashamed why I couldn't think it correctly? Basically, auto margin is what left margin 50% minus width of the div. In this basis, we can layout the element like this:
今天看到自己的问题，惭愧自己怎么想不通？基本上，自动边距是左边距减去 div 宽度的 50%。在此基础上，我们可以这样布局元素：
margin-left: calc(50% + 5px);
transform: translateX(-50%);
Using the preceding code is equivalent to calc(auto + 5px);. Since, calc doesn't support auto we need to trick with actual concept of translation. This means we can also layout with absolute position with the concept of 50% - half of width, but I like transformhere for simplicity.
使用前面的代码等效于calc(auto + 5px);. 由于 calc 不支持 auto 我们需要用实际的翻译概念来欺骗。这意味着我们也可以使用 的概念进行绝对位置布局50% - half of width，但transform为了简单起见，我喜欢这里。
See the demo below:
请参阅下面的演示：
.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>Increase or decrease the plus minus value of left and right to understand it correctly.
增加或减少左右的正负值才能正确理解。
Note:using the below code
注意：使用下面的代码
.right{
margin-left: calc(50% + 20px);
transform: translateX(-50%);
}
is same as using:
与使用相同：
.right{
margin-right: calc(50% - 20px);
transform: translateX(-50%);
}
for this concept.
对于这个概念。
Also notethat the question is related to some percentage calculation plus minus desired shift. So in this answer, it has both calc and transform is used. If you exactly require to shift at middle then we could just use (without margin-left or margin-right):
另请注意，该问题与某些百分比计算加减所需偏移有关。所以在这个答案中，它同时使用了 calc 和 transform 。如果您确实需要在中间移动，那么我们可以使用（没有 margin-left 或 margin-right）：
transform: translateX(-20px)
The answer is provided with 50% calc but the question was requiring to use some percentage like calc(20% - 20px).
答案提供了 50% 的计算，但问题是需要使用一些百分比，例如calc(20% - 20px).
回答by Mr. Alien
From MDN:
来自MDN：
The calc() CSS function can be used anywhere a
<length>,<frequency>,<angle>,<time>,<number>, or<integer>is required. With calc(), you can perform calculations to determine CSS property values.
的计算值（）函数CSS可以在任何地方使用的
<length>，<frequency>，<angle>，<time>，<number>，或<integer>是必需的。使用 calc()，您可以执行计算以确定 CSS 属性值。
You cannot useautothere, as it's not a valid value for calc().
您不能auto在那里使用，因为它不是calc().
Grammar for 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
;
For more information, refer the Docs
有关更多信息，请参阅文档
As you commented that you want to center the divbut you also want a 5pxmarginon the rightthan you can achieve it by using text-align: center;on the parent element and make the child divelements to display: inline-block;
正如您评论的那样，您希望将 居中，div但您也希望在5pxmargin上使用right比您可以通过text-align: center;在父元素上使用并使子div元素成为display: inline-block;
Output
输出
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;
}
