问题描述
如何通过CSS理想地通过CSS移动绝对位置元素而不是左上角?
我目前有一个圆形元素,我正在调整绝对定位。我想将它从圆心移开,这样我就可以将它与背景上的一条线对齐。圆的大小是动态的,背景也是如此。试图让红色圆圈与靛蓝与灰色的位置对齐。
//下面是代码
了解更多详情
How would one move an absolute position element through CSS ideally by its center instead of its top left corner?
I currently have a circular element that I am adjusting via absolute positioning. I would like to move it based off of the center of the circle so that I can align it with a line on the background. The size of the circle is dynamic, and so is the background. Trying to get the red circle aligned to where the indigo meets the grey.
//Heres the code
https://jsfiddle.net/4akwe208/4/
I think this is what you are trying to do is to use CSS transforms
property with the value translate
.
#your-div-id {
-ms-transform: translate(-50%, 50%); /* IE 9 */
-webkit-transform: translate(-50%, 50%); /* Safari */
transform: translate(-50%, 50%);
}
The value -50%
controls X-axis, and 50%
is for the Y-axis
PS: play around the values to get what you want
check this link for more details
这篇关于基于中心移动绝对位置元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!