jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用jquery对所有设备进行垂直对齐?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现在页面上垂直对齐一些元素是有问题的,而不改变其他元素布局.

这个问题在移动设备上被放大了.如此多的屏幕尺寸,分辨率,肖像,风景……

var x=window.innerHeight - $('#myDiv').height();
    $('#myDiv').css ('margin-top',x/2);

这适用于所有设备,移动设备和桌面设备.你认为这些方法有任何缺点吗?

据我所知,今天所有设备都支持JavaScript.但是,某些设备是否可能支持JS但不支持jQuery?

@H_944_16@解决方法
您应该使用$(‘#myDiv’).parent().height()而不是window.innerHeight,因为如果您的#myDiv元素被另一个元素包装,您的方法可能无法正常工作.
您还可以将代码封装到jQuery插件中,如下所示:

jQuery.fn.verticalAlign = function ()
{
    return this
            .css("margin-top",($(this).parent().height() - $(this).height())/2 + 'px' )
};

然后你就可以使用它:

$('#myDiv').verticalAlign();

是否有可能某些设备支持JS但不支持jQuery?
不,所有支持正确版本的JS的设备必须兼顾jQuery,因为jQuery的核心是纯JS
但是,如果要在浏览器屏幕中垂直对齐元素,可以使用以下代码

jQuery.fn.verticalAlignScreen = function ()
{
    return this
            .css("position","absolute")
            .css("top",Math.max(0,(($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
};

大佬总结

以上是大佬教程为你收集整理的使用jquery对所有设备进行垂直对齐?全部内容,希望文章能够帮你解决使用jquery对所有设备进行垂直对齐?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。