使用jquery对所有设备进行垂直对齐？

Posted 2023-03-05

【中文标题】使用jquery对所有设备进行垂直对齐？

【英文标题】：Vertical align using jquery for all devices?

【发布时间】：2013-07-16 22:01:06

【问题描述】：

我发现垂直对齐页面上的一些元素而不改变其他一些元素的布局是有问题的。

这个问题在移动设备上被放大了。这么多屏幕尺寸、分辨率、纵向、横向...

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

这应该适用于所有设备、移动设备和桌面设备。您认为这些方法有什么缺点吗？

据我了解，当今所有设备都支持 javascript。但是，有没有可能有些设备支持 JS 但不支持 jQuery 呢？

【参考方案1】：

您应该使用$('#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");
;

【讨论】：

谢谢，ABFORCE。关于封装的非常有趣的故事。对我有用。比方说 - 解决了

【参考方案2】：

JQuery - 是同一个 JavaScript！它只是一个具有您可以使用的预先编写功能的容器（框架）。因此，如果 JS 有效 - JQ 有效。但移动设备上的差异在于 Java Script 引擎。我可以说 Safari JS 引擎比 Google 更好，这意味着你的 Web 应用程序在 ios 上运行会更快

【讨论】：

感谢 Cheese 的澄清。

我会说 jquery 只是一个库，而不是一个框架，因为它没有给你任何架构结构/基础设施。

【参考方案3】：

实际上，如果您知道 div 的高度，那么您可以只使用纯 css，例如我有弹出窗口，高度为 540px。要在所有不同的设备上垂直对齐，我会使用：

.popup
  top:50%;
  margin-top:-270px;

水平对齐也是如此。只有在那里你使用另一种样式。例如，您的 div 宽度为 480px：

.popup
   left:50%
   margin-left:-240px;
 

另一种接近垂直对齐的方法，如果您不知道高度，并且不想关心它，请遵循 jquery 方法：

    var a =  Math.round( $(".popup").height()/2 );//here we get half of our divs height
    $(".window_popup").css("margin-top", ( - a  + "px" ) );//here we give to  
   //variable negative  value and get necessary result :)