是否可以通过元素的中心点而不是左上角来告诉代码？如果我的父元素有
width: 500px;
而我的孩子元素有
/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;
可以假设,基于50%定位,子元素将位于父元素的中间,150px每侧留下自由空间.然而,它不是,因为它是孩子的左上角,50%达到了父母的宽度,因此整个孩子的宽度200px从那里向右移动,留下250px左边的自由空间,只50px留在右边.
所以,我的问题是,如何实现中心定位？
我找到了这个解决方案
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
但我不喜欢它,因为你需要为每个元素的宽度手动编辑它 - 我想要一些全局工作的东西.
(例如,当我在Adobe After Effects中工作时,我可以为对象设置位置,然后设置将放置到该位置的该对象的特定锚点.如果画布是1280px宽的,则将对象定位到640px您选择对象的中心作为锚点,然后整个对象将在1280px宽画布中居中.)
我会在CSS中想象这样的事情:
position: absolute;
left: 50%;
horizontal-anchor: center;
类似地,horizontal-anchor: right将元素放置在右侧,因此整个内容将从其父级50%宽度的点开始向左.
并且,同样适用vertical-anchor,你得到它.
那么,这样的事情可能只使用CSS(没有脚本)吗？
谢谢!
我正在尝试创建一个弹出消息,禁用屏幕的其余部分,直到您确认它,只使用CSS和JavaScript(并且没有该alert功能).
尽管http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx声明setAttributeIE8及更高版本支持它,但它似乎无法正常工作 - 实际上,实际上它似乎根本不起作用.
这是我的代码:
<html>
<style type="text/css">
.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}
.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px; …