javascript - 如何获得垂直对齐元素的正确顶部位置?

标签 javascript html css

本页http://orad.msbitsoftware.com/尝试垂直对齐登录表单。当我尝试通过 JavaScript 获得它的顶部位置时,我得到了错误的结果,这与 chrome 开发人员工具得到的结果相同(见附件截图)。

element's top position is wrong even in Chrome inspector

谁能解释一下导致这个问题的原因?为什么浏览器的原生工具也会受到影响?有没有办法通过 JavaScript 获取元素的正确位置?

谢谢。

最佳答案

这是一种将高度未知的元素垂直居中的常用方法。

顶部位置设置为50%,使元素的顶部位于父元素的中心(这个50%与父元素的高度有关)

并且元素以 50% 的垂直平移进行转换。这与元素高度有关,并使元素垂直移动,直到它的中心位于父元素的中心

top: 50%;
transform: translateY(-50%);

您获得的最高值在转换之前。这是正确的行为,但在视觉上您会看到转换后的元素。

更好的解释 here查看 -> vertically -> block level -> unknown height 部分

关于javascript - 如何获得垂直对齐元素的正确顶部位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30798238/

相关文章:

css - 为什么我不能更改 div 的背景

javascript - 根据 html 下拉列表部分分配 javascript 变量值

javascript - 处理 html 作为来自服务器的纯文本响应的问题

css - 内联 block 跨度(在 html td 内)文本省略号在长词上失败

javascript - 如何修改只读值?

javascript - modernizr CSS3 动画回退到 swf

css - 为什么我的 CSS 变量不起作用?

html - 仅在 Wordpress 中更改一页的填充

javascript - html 移动导航,::after 仅在子菜单上是错误的

javascript - Jquery验证: How to validate that all or none of a group of textboxes have values?