当前位置：文江博客话题详情

使用中心插件将 jQuery 中心元素设置为视口

发布于 2024-10-21 06:44:30 字数 157 浏览 4 评论 0原文

我目前正在使用 jQuery center 插件来居中我的 div 元素，到目前为止，它可以在一定范围内将其居中到包含的父容器。我想要它做的是将其居中到当前浏览器视口中心。那怎么办呢？

我的设置是一个简单的链接，单击时会弹出一个 div，就像我希望居中于当前浏览器视口中心的模式一样。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏别ゝ 2024-10-28 06:44:30

无需插件。这可以解决问题：

$('#yourElement').css('display', 'inline-block').wrap('<table style="position:fixed;top:0;left:0;height:100%;width:100%;border-spacing:0;border-collapse:collapse"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>');

现场演示： http://jsfiddle.net/simevidas /EnrLn/1/

同样的事情，但没有 TABLE 元素。我将 DIV 与 display:table 和 display:table-cell 结合使用：

现场演示： http://jsfiddle.net/simevidas/EnrLn/2/

No plug-in is needed. This does the trick:

$('#yourElement').css('display', 'inline-block').wrap('<table style="position:fixed;top:0;left:0;height:100%;width:100%;border-spacing:0;border-collapse:collapse"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>');

Live demo: http://jsfiddle.net/simevidas/EnrLn/1/

Same thing, but without the TABLE element. I use DIV's with display:table and display:table-cell instead:

Live demo: http://jsfiddle.net/simevidas/EnrLn/2/

回复收藏 0 原文

剧终人散尽 2024-10-28 06:44:30

使用

jQuery( "#element_id" ).css( 'top', parseInt( ( jQuery( window ).height() / 2 ) + jQuery( document ).scrollTop() - jQuery( "#element_id" ).height() ) );
jQuery( "#element_id" ).css( 'left', parseInt( ( jQuery( document ).width() / 2 ) + jQuery( document ).scrollLeft() - jQuery( "#element_id" ).width() ) );

Use

jQuery( "#element_id" ).css( 'top', parseInt( ( jQuery( window ).height() / 2 ) + jQuery( document ).scrollTop() - jQuery( "#element_id" ).height() ) );
jQuery( "#element_id" ).css( 'left', parseInt( ( jQuery( document ).width() / 2 ) + jQuery( document ).scrollLeft() - jQuery( "#element_id" ).width() ) );

回复收藏 0 原文

~没有更多了~