我对在网页中居中内容的各种解决方案从未完全满意。 <center>
tag 在 18 世纪中叶就被弃用了,但我没有看到一个合理的替代方案。具体来说,我想要的是有一个居中的父 DIV,但是我可以在其左上角“绝对”地设置东西。
有没有一种方法可以在不使用重新测量所有内容的 window.onresize javascript 的情况下完成此操作?这似乎是一个相当直接的想法...我想要绝对定位的东西,我只希望 0,0 坐标相对于浏览器窗口左上角以外的其他东西。
现在,我所做的是设置一个 div 使其内容居中,然后使用相对定位进行调整,但这非常令人厌烦,因为相对对象不断以我完全不希望的方式相互插入。
非常感谢对此的任何和所有想法。
最佳答案
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
只是示例代码,但任何 .child 元素都将位于包装器的 0,0
任何绝对定位的元素都将绝对定位到它最近的位置相对父元素。如果一个元素没有相对位置的父元素,它只使用文档。下面是一个没有类的示例(为清楚起见添加了一些颜色和宽度样式)。
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
关于html - 需要帮助 CSS 以绝对定位居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1034449/