在所有设备上使用 jquery 垂直对齐?

2024-05-01

我发现在不更改其他元素布局的情况下垂直对齐页面上的某些元素是有问题的。

这个问题在移动设备上更加严重。如此多的屏幕尺寸、分辨率、纵向、横向......

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(使用前将#替换为@)

在所有设备上使用 jquery 垂直对齐? 的相关文章

  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • 将杂散文本包裹在 div 中

    如何选择 任何没有包含标签的内容 来在 jQuery 中添加包装器 前任 div class post div class whatever This should remain untouched div I want to wrap t
  • Jquery,清除/清空 tbody 元素的所有内容?

    我认为这会相当简单 但似乎空方法无法清除我拥有的 tbody 如果有人知道执行此操作的正确方法 我将不胜感激 我只想删除 tbody 中包含的所有内容 到目前为止我正在尝试 tbodyid empty HTML table tbody tr
  • Fancybox 画廊组

    我正在使用 fancyboxhttp fancyapps com fancybox http fancyapps com fancybox 我的问题是 我可以将不同的资源组合在一起吗 我的意思是同一画廊 或 组 中带有内嵌或视频的图像 如果
  • 有没有非常轻的灯箱? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • jQuery:动态添加 DOM 元素时尝试将函数挂钩到 onclick,但它立即执行该函数

    我正在使用 jQuery 动态 我的意思是在运行时 向页面的 DOM 添加一个 span 元素 create add task button document createElement span attr id activityNameH
  • 如何使用Jquery使用javascript运算符符号搜索表单列?

    实际上 我试图在搜索后获取单个表列值 如果我选择 运算符并在列中键入任何输入值 然后在搜索后 输入值将类似于匹配相似值的一行或多行 同样 如果我选择 运算符和此列 则将获得小于输入值的任何输入值 如果我选择 运算符 则小于或等于输入值将获得
  • 如何以编程方式禁用 元素上的自动选择?

    然后用户使用 TAB 或 SHIFT TAB 跳转 到某个文本框 并且该文本框恰好有一个值 那么该值将被自动选择 我想禁用此行为 我认为这可以在 focusin 事件处理程序内部完成 input text focusin function
  • jquery选中复选框IE问题

    我在验证是否使用 Internet Explorer 上的 jquery 选中复选框时遇到问题 这是我正在使用的代码 if chkjq 1 attr checked true 它在 Firefox 或 Chrome 上运行良好 但在 Int
  • 将相同的多个对象推送到多个数组中

    这是后续使3个数组相互对应 第一个是对象名称 https stackoverflow com questions 57564488 make 3 arrays correspond to each other with the first
  • Safari 不触发表单提交

    对于一个项目 我有两个选择表单字段 它们通过 jquery 触发器 提交 发送 这在 Firefox 和 Chrome 中运行良好 但在 Safari 中没有任何反应 这是 HTML 代码
  • 如何在 的每四个循环项之后添加

    我想在循环中的每第四个数字项之后退出循环 我想创建一个二十人的名单 在每一个tr应该是4个人 So I want to break from the loop after every 4th number of loop My one tr
  • 使用 Jquery Ajax 将数据从 jsp 发送到 struts2 操作类

    我需要使用 jquery Ajax 将表单数据从 jsp 传递到 struts2 并从 Struts2 操作类接收回 JSON 数据 我已经给出了下面的代码 当我传递 AJAX 数据时 url search action searchTex
  • 为什么 Bootstrap 需要 jQuery? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我已经多次用谷歌搜索这个问题 但从未找到满意的答案 大多数答案似乎只是说 是的 Bootstrap 插件确实需要 jQuery https st
  • 节省页面加载时间的提示[重复]

    这个问题在这里已经有答案了 我的问题 削减那些不必要的 kb 并使页面加载速度更快的最佳方法是什么 全部是什么优化实践 编码实践 在js php中 如果执行可以使您的页面更轻 为什么我问这个 我读了这篇关于 jquery js 与 jque
  • 如果验证失败,如何在 ASP.NET MVC 中阻止 jquery ajax 提交

    我在用ASP NET 5 MVC RC1 我的 ASP NET MVC 使用的 jquery 验证插件是默认 ASP NET 5 模板项目使用的标准 jquery validate js jQuery Validation Plugin v
  • c3js数据标签的位置

    有没有可能的方法来更改数据上方标签的位置c3条形图 在官方文档中 很好地解释了如何通过操作 y 和 x 整数来更改 x 和 y 测量轴上标签的位置 但我没有找到任何数据标签 我试图用简单的方式指出它d3其上c3是基于但是console lo
  • asp.net mvc jquery 下拉验证

    我如何使用不显眼的 javascript 验证下拉列表 作为所需验证器的验证文本框 但它不适用于下拉列表 需要更改不显眼的 js 文件吗 或者还有其他选项来验证下拉列表吗 我想在我的 javascript 中检查 form validate
  • 如何清除画布中图像上的矩形

    我需要清除画布中图像上绘制的矩形 而不损坏现有图像 我可以绘制小矩形点并将其清除 但问题是 当我清除矩形时 它在图像上仍保留为白色小斑点 有人可以告诉我如何清除图像上的矩形而不损坏现有图像 我使用了以下方法来清除矩形 但没有用 1 cont

随机推荐

  • RS 232 中断信号

    我有一个RS232信号捕获设备 而且效果很好 我需要一些帮助来理解数据 基本上我们购买它是因为我们正在处理 80 年代末使用串行通信的机器控制器 尽管知道端口参数 但我们运气不佳 从我转储的数据来看 机器控制正在使用中断信号作为其协议的一部
  • 如何禁用 django-rest-framework 的管理风格可浏览界面?

    我在用django rest framework http django rest framework org 它提供了一个很棒的 Django 管理风格的可浏览的自文档 API 但任何人都可以访问这些页面并使用该界面添加数据 POST 我
  • 如何使用 Material-ui@next TextField 错误道具

    我想使用 Material UI Next 文本字段error props link https material ui next com api text field textfield 道具类型为boolean 之前版本的 Materi
  • 将日期添加到日历热图 R

    I m plotting a calender heat map using Paul Bleicher s calenderHeat R code https raw githubusercontent com iascchen VisH
  • 我可以使用 DataContract 序列化程序序列化 Dictionary 吗?

    我计划构建一个 WCF 服务 返回序列化为 JSON 的通用字典对象 不幸的是 序列化失败 因为对象可能总是不同的 KnownTypes 没有帮助 因为属性类型是 Dictionary 而且我不能说 KnownType 因为类可能总是不同
  • 在 .NET 中可以将数组或列表作为属性返回吗?

    我正在阅读 MSDN 上的一些文档 了解有关某些内容是否应该作为属性或方法实现的注意事项 我特别遇到了一条规则 对此我有疑问 如果 操作返回一个数组 请使用方法 而不是属性 页面在这里 在属性和方法之间进行选择 https msdn mic
  • 使用 serde 通过数值作为类型标识符对 json 进行反序列化

    我对 Rust 很陌生 并且有 OOP 背景 所以 也许我误解了一些 Rust 基础知识 我想用 serde 解析固定的 json 结构 该结构代表不同的消息类型之一 每条消息都有一个数字type属性来区分它 各个消息类型的确切结构大多不同
  • 仅隐藏输入字段的内容

    我有一个与输入字段重叠的跨度 当您在输入字段中键入内容时 它会更新其内容 尽管我将跨度完美地定位在输入文本上 但您仍然可以看到文本更加粗体并且字母更粗 field nr 1 with span nr 2 without 我尝试隐藏整个输入字
  • 如何在 git log 中查看提交的 git bisect 状态?

    我正在做 git bisect 到目前为止我发现了一些好的和坏的提交 我可以通过运行来确认git bisect log 但是 如果我为我的分支运行 git loggit log graph decorate full origin mast
  • Windows API 代码包 - ShellFile 不生成 PDF 位图

    使用之前堆栈溢出问题中的代码 System Drawing Bitmap image ShellFile f ShellFile FromFilePath fileLocation image f Thumbnail ExtraLargeB
  • 如何在 Postgres 中对包含语义版本的列进行排序

    有没有办法高效存储https semver org https semver orgPostgres 中的版本字符串 然后执行最新查询 例如假设列的值为 1 1 0 1 0 0 1 2 0 1 0 1 rc 1 B001 我想排序并获取最新
  • Socket IO聊天例子很慢

    我是 Node js 和 Socket IO 的新手 我想尝试一下解释的示例 https socket io get started chat https socket io get started chat 我做了我必须做的一切 它起作用
  • 不同 Perl 安装造成的混乱

    我尝试升级 Perl 却把我的电脑搞得一团糟 我目前运行的是 RHEL6 5 64 位 事情是这样的 我安装了 perl 5 10 1 并且运行良好 这是安装好的 我可以从百胜看到它 我想安装 Padre 一个 Perl IDE 但这至少需
  • 删除查询字符串参数

    Is there any way to remove query string parameters from url in azure api management Thanks in advance 是的 您可以通过在发布者门户的操作屏
  • 角度锚标记单击的元素 ID 未显示

    我正在尝试获取单击的锚元素的 id 这是我的 HTML div class list group col md 4 a href class list group item img src book image alt p strong P
  • 如何在android文本视图的任意一端插入文本?

    是否可以有一个文本视图 其中在文本视图的最左侧包含一些文本 在文本视图的最右侧包含一些文本 例如 我想要一个应该像这样显示的文本视图 文字 a 可以使用单个 TextView 只需将文本放入 HTML 格式即可 例如
  • Firebase 动态链接无法获取参数

    我正在我的应用程序中处理邀请 我希望用户推荐其他人 推荐人将在他们推荐的人注册后获得奖励 我正在关注这个firebase 邀请教程 https firebase google com docs dynamic links use cases
  • 有没有办法运行查询并检查聚合数据而无需再次重新运行查询?

    在决定枚举 LINQ 查询的结果集之前 我想查看查询结果计数 可能还有其他聚合数据 几乎每个 LINQ 示例都会立即枚举 foreach 循环中的结果 但我想检查计数以确定是否需要循环每个结果 有没有办法运行查询并检查聚合数据而无需再次重新
  • jQuery 绑定 ajax:成功无法在 Rails 3 应用程序中为新创建的(ajax)项目工作

    编辑这篇文章是因为我发现问题实际上在于rails无法绑定到ajax success函数 使用导轨3 2 3 感谢您花时间阅读并尝试提供帮助 我在 ajax success 删除项目上添加一个简单的淡出功能 如下所示 document rea
  • 在所有设备上使用 jquery 垂直对齐?

    我发现在不更改其他元素布局的情况下垂直对齐页面上的某些元素是有问题的 这个问题在移动设备上更加严重 如此多的屏幕尺寸 分辨率 纵向 横向 var x window innerHeight myDiv height myDiv css mar