[英]CSS absolute position won't work with margin-left:auto margin-right: auto
Say you have the following CSS applied to a div tag假设您将以下 CSS 应用于 div 标签
.divtagABS {
position: absolute;
margin-left: auto;
margin-right: auto;
}
the margin-left
and margin-right
does not take effect margin-left
和margin-right
不生效
but if you have relative, it works fine ie但如果你有亲戚,它工作正常即
.divtagREL {
position: relative;
margin-left: auto;
margin-right: auto;
}
Why is that?这是为什么? I just want to center an element.
我只想让一个元素居中。
Can someone explain why setting margins to auto in absolute position does not work?有人可以解释为什么在绝对 position 中将边距设置为自动不起作用吗?
EDIT : this answer used to claim that it isn't possible to center an absolutely positioned element with margin: auto;
编辑:这个答案曾经声称不可能将绝对定位的元素与
margin: auto;
居中margin: auto;
, but this simply isn't true. ,但这根本不是真的。 Because this is the most up-voted and accepted answer, I guessed I'd just change it to be correct.
因为这是投票最多和被接受的答案,所以我想我只是将其更改为正确的。
When you apply the following CSS to an element当您将以下 CSS 应用于元素时
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
And then give the element a fixed width and height, such as 200px or 40%, the element will center itself.然后给元素一个固定的宽度和高度,比如 200px 或 40%,元素将自己居中。
I've used this trick to center an absolutely positioned element .我已经使用这个技巧将绝对定位的元素居中。 Though, you have to know the element's
width
.但是,您必须知道元素的
width
。
.divtagABS {
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
Basically, you use left: 50%
, then back it out half of it's width
with a negative margin
.基本上,你使用
left: 50%
,然后用负margin
将它的width
减半。
if the absolute element has a width,you can use the code below如果绝对元素有宽度,你可以使用下面的代码
.divtagABS{
width:300px;
positon:absolute;
left:0;
right:0;
margin:0 auto;
}
I already had this same issue and I've got the solution writing a container (.divtagABS-container, in your case) absolutely positioned and then relatively positioning the content inside it (.divtagABS, in your case).我已经遇到了同样的问题,我已经有了写一个容器(.divtagABS-container,在你的情况下)的解决方案,绝对定位然后相对定位其中的内容(.divtagABS,在你的情况下)。
Done!完毕! The margin-left and margin-right AUTO for your .divtagABS will now work.
.divtagABS 的 margin-left 和 margin-right AUTO 现在可以使用了。
All answers were just a suggested solutions or workarounds.所有答案都只是建议的解决方案或解决方法。 But still don't get answer to the question: why margin:auto works with position:relative but does not with position:absolute.
但仍然没有得到问题的答案:为什么 margin:auto 与 position:relative 一起工作,但不与 position:absolute 一起工作。
Following explanation was helpful for me:以下解释对我有帮助:
"Margins make little sense on absolutely positioned elements since such elements are removed from the normal flow, thus they cannot push away any other elements on the page . Using margins like this can only affect the placement of the element to which the margin is applied, not any other element." “对于绝对定位的元素,边距几乎没有意义,因为这些元素从正常流中删除,因此它们不能推开页面上的任何其他元素。使用这样的边距只会影响应用了边距的元素的位置,不是任何其他元素。” http://www.justskins.com/forums/css-margins-and-absolute-82168.html
http://www.justskins.com/forums/css-margins-and-absolute-82168.html
This issue can be confusing until you realize some nuances of different positionings.在您意识到不同定位的一些细微差别之前,这个问题可能会令人困惑。
Margins work similarly for relative and absolute elements, but margins are relative to a 'bounding box.'边距对于相对和绝对元素的作用类似,但边距是相对于“边界框”的。 You have to consider what is the bounding box of the element, to apply margins against.
您必须考虑元素的边界框是什么,以应用边距。
This is why to center a relative positioned element, you only have to set margins and it works.这就是为什么要使相对定位的元素居中,您只需要设置边距就可以了。
To center an absolute positioned element, you have to set the margins, and also set the bounding box (left/right/top/bottom).要使绝对定位的元素居中,您必须设置边距,并设置边界框(左/右/上/下)。
If the element is position absolutely, then it isn't relative, or in reference to any object - including the page itself.如果元素是绝对位置,则它不是相对的,也不是引用任何对象 - 包括页面本身。 So
margin: auto;
所以
margin: auto;
can't decide where the middle is.无法决定中间在哪里。
Its waiting to be told explicitly, using left
and top
where to position itself.它等待被明确告知,使用
left
和top
来定位自己。
You can still center it programatically, using javascript or somesuch.您仍然可以使用 javascript 或其他方式以编程方式将其居中。
When you are defining styles for division which is positioned absolute
ly, they specifying margins are useless.当您为
absolute
定位的除法定义样式时,它们指定边距是无用的。 Because they are no longer inside the regular DOM tree.因为它们不再在常规 DOM 树中。
You can use float to do the trick.您可以使用浮动来解决问题。
.divtagABS {
float: left;
margin-left: auto;
margin-right:auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.