我发现在不更改其他元素布局的情况下垂直对齐页面上的某些元素是有问题的。
这个问题在移动设备上更加严重。如此多的屏幕尺寸、分辨率、纵向、横向......
var x=window.innerHeight - $('#myDiv').height();
$('#myDiv').css ('margin-top', x/2);
这对于所有设备(移动设备和桌面设备)应该没问题。您认为这些方法有什么缺点吗?
据我了解,当今所有设备都支持 JavaScript。但是,有可能有些设备支持 JS 但不支持 jQuery 吗?
你应该使用$('#myDiv').parent().height()
代替window.innerHeight
, 因为如果你的#myDiv
元素被另一个元素包裹,您的方法可能无法正常工作。
您也可以将代码封装到jQuery plugin
, 像这样:
jQuery.fn.verticalAlign = function ()
{
return this
.css("margin-top",($(this).parent().height() - $(this).height())/2 + 'px' )
};
然后你可以像这样使用它:
$('#myDiv').verticalAlign();
is it possible that some device support JS but doesn't support 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");
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)