程序员经验分享-hwhale

垂直居中弹出框 div

2024-05-07

我正在尝试制作一个类似 iPad 的弹出框 div 作为练习，但我不知道如何使弹出框 div 垂直居中，因为内容宽度/高度未指定。

http://jsfiddle.net/mbYyR/5/ http://jsfiddle.net/mbYyR/5/

我希望三角形指向 #popover-wrapper 的上/下右/左值定义的位置，但是top: -50%不起作用。

感谢您的帮助 ：）


您可以使用 jquery 解决此问题，请检查小提琴链接 http://jsfiddle.net/mbYyR/66/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

垂直居中弹出框 div 的相关文章

  • 如何使用XPath选择非空段落？

    我想要抓取的网页具有类似的结构 每个都有一个段落是一个问题 一个段落是一个答案 我想抓取每个问题和答案并将它们存储在两个项目中 问题是 在某些页面上 问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1

  • 如何让CSS选择以字符串开头的ID（不是Javascript）？

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro

  • jQuery 变量在定义时声称它是未定义的

    我试图在同一页面上有两个自动填充文本框 一个用于手机型号 input1 一个用于固件 input2 当两者都填充时 我希望显示一个带有ID input1input2 的div 但是当在input1 中输入值时 它声称phone 的变量未定义

  • 使用base64编码图像的优点和缺点[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在考虑为我正在开发的网站使用 Base64 编码图像来优化加载时间 不管怎样 在开始之前 我想知道 这样做的优点和缺点是什么 目前 我没有看

  • 从字体到跨度（大小和颜色）和背面的正则表达式（VB.NET）

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font

  • Beautifulsoup findAll 是如何工作的

    我注意到一些奇怪的行为findAll的方法 gt gt gt htmls p class slytherin p p class gryffindor p gt gt gt soup BeautifulSoup htmls html par

  • TDD/测试 CSS 和 HTML？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha

  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1

  • 如何将大于整个页面 100% 的元素居中对齐？

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在

  • 在流体设计中将元素的宽度调整为其高度的百分比，反之亦然？ [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用

  • 如何覆盖 bootstrap 表 td 样式？

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can

  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS

  • 使用 :hover 作为元素的内联样式（使用 HTML/CSS/php）[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i

  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div

  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div

  • PHP 共享标头而不使用服务器端脚本？

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有

  • Android中webview的截图方法

    我在 webview 中的 html5 canvas 上画了一些线 并尝试使用下面的代码截取 webview 的屏幕截图 WebView webView WebView findViewById R id webview webView s

  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是

随机推荐

  • 在书签中使用本地存储

    我非常喜欢使用带有小脚本的书签 例如 我编辑了注释编辑脚本这个帖子 http www reddit com r LifeProTips comments 265rxe lpt use a browser tab as a quick and

  • 在显示另一个对话框之前隐藏所有可见的 Metro 对话框

    我在用着MahApps Metro http mahapps com在我的 WPF 项目中 我正在构建一个类来帮助我展示Dialogs http mahapps com controls dialogs html 我想知道是否有一种方法可以

  • 有没有办法在 asp.net core 3.1 Rest-API 中使用 Identity Server 功能

    我正在使用 asp net core 3 1 在服务器中使用 Rest API 的项目 以 Angular 作为单页应用程序的前端 从每个客户端 用户需要提供其用户名和密码才能访问 Web API 的受保护部分 我想使用 Identity

  • DATEADD(day, -7, GETDATE()) - 是否考虑了时间？

    我正在通过 Amazon Redshift 在 Aginity 中编写 SQL 查询来提取过去 7 天的数据 这Date我调用的列是变量类型 DATE 输出示例如下 5 30 2017 0 00 当我调用下面的函数时 运行此查询在一天中的什

  • Haskell 中美元符号 ($) 和 id 函数之间有关系吗？

    这几天我正在读一篇评论莫纳德挑战 http mightybyte github io monad challenges 我强烈推荐给像我这样的 Haskell 初学者 我最终得到了这个线程 https news ycombinator co

  • 如何从symfony2中的表单对象获取每个字段的错误消息？

    我按照这个教程http symfony com doc current forms html http symfony com doc current forms html我完美地呈现了我的插入表单 但只有一个问题我无法解决 当表单无效时

  • Solr 过滤查询 - 字符串与整数

    假设我正在尝试查询一堆具有类别的文档 并且我想将查询限制为指定的类别 据我所知 这只是使用 fq 参数 过滤器查询 我想知道将参数设置为整 数而不是字符串或数据通常的情况是否会提高性能 我只是会在右侧犯错 但我想我应该仔细检查一下 以防万一

  • 将 ElasticSearch SearchResponse 对象转换为 JsonObject

    我想将elasticsearch搜索结果转换为Json对象 我还没有找到任何直接转换的正确方法 SearchResponse response client prepareSearch index setExplain true execu

  • 创建一个类的所有常量的数组？

    我正在使用一个定义了近 20 个常量的类 因为我希望所有这些常量值都在一个数组中 我只想知道 有没有什么方法可以创建一个类的所有常量的数组 我尝试过compact https www php net manual en function c

  • 使用 ruby​​ 获取 URL 的内容长度

    我正在尝试编写一个 ruby 脚本 该脚本使用以下命令获取有关网站上文件的一些详细信息net http 我的代码如下所示 require open uri require net http url URI parse asset res N

  • OAuth 2.0：优点和用例 - 为什么？

    谁能解释一下 OAuth2 的优点以及为什么我们应该实施它 我问这个问题是因为我对此有点困惑 这是我目前的想法 OAuth1 更准确地说是 HMAC 请求看起来合乎逻辑 易于理解 易于开发并且非常非常安全 相反 OAuth2 带来了授权请求

  • 在 C 或 C++ 中返回结构是否安全？

    我的理解是不应该这样做 但我相信我已经看到过这样做的示例 注意代码不一定在语法上正确 但想法就在那里 typedef struct int a b mystruct 然后这是一个函数 mystruct func int c int d my

  • 如何解决使用 UWP GetFolderFromPathAsync 时访问被拒绝的问题

    尝试使用 GetFolderFromPathAsync 从 UWP 应用访问文件系统时 我的访问被拒绝 我的 UWP 应用需要访问 Windows 10 文件系统 我正在使用 BroadFileSystemAccess 但被卡住了 我下面的

  • 如何关闭 IntelliJ 编辑器中的无限空白？

    如何删除 IntelliJ 中行尾后移动光标的功能 文件菜单 gt 设置 gt 编辑器 gt 常规 gt 虚拟空间并取消选中 允许在行尾后放置插入符号 您还可以取消选中 虚拟空间 面板中的其他选项

  • iOS Flutter 与 Firebase：启动时 FlutterAppDelegate 中出现白屏和 SIGABRT

    现在在多个项目中 非常不一致的是 我在启动应用程序时出现白屏 并且 Xcode 显示错误 Thread 1 signal SIGABRT 在线上 objc class AppDelegate FlutterAppDelegate 这些都是i

  • 不同GIT版本的GIT合并结果不同

    在不同的 GIT 版本上运行 merge 命令我们得到不同的结果 命令是 git merge no ff origin master codeline Results 版本2 1 4 gt 合并成功 版本1 7 1 gt 同一提交上的同一合

  • 非等值连接一步添加 data.table 中范围表的所有列

    我确信我忽略了显而易见的事情 但我找不到一种方法来连接 查找 表的所有列data table非等值连接一步到位 我看了阿伦的演讲 https github com Rdatatable data table wiki talks ArunS

  • jQuery Cycle 幻灯片的动画内容

    每张幻灯片都由标题框和图像组成 div div class slide div class slideTitle h2 First title h2 div img src image jpg div div class slide div

  • 如何在不退出的情况下更新会话值？

    With NextAuth js https github com nextauthjs next auth 如何在不注销并再次登录的情况下更新会话对象内的值 例如 一旦用户登录 我就会使用会话中存储的 URL 来显示用户的头像 我还提供用

  • 垂直居中弹出框 div

    我正在尝试制作一个类似 iPad 的弹出框 div 作为练习 但我不知道如何使弹出框 div 垂直居中 因为内容宽度 高度未指定 http jsfiddle net mbYyR 5 http jsfiddle net mbYyR 5 我希望

热门标签