在没有媒体查询的情况下表格线交叉的中心页面上的锚点图像

Posted 2023-03-06

【中文标题】在没有媒体查询的情况下表格线交叉的中心页面上的锚点图像

【英文标题】：Anchor image over the center page where the table lines cross without media queries

【发布时间】：2020-01-20 19:16:38

【问题描述】：

https://jsfiddle.net/ze5k4cqb/ 如何用表格线交叉覆盖它们的图像覆盖页面中心？它可以在没有媒体查询的情况下完成吗？使用媒体查询，所以使用百分比作为边距，像这样

        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 40%;
        right: 40%;

它因不同的分辨率设置而失败。 是否存在无需 3000 行媒体查询就能做到这一点的技巧？

【参考方案1】：

悬停时的炫酷动画。我只能说transform: translate 是你的朋友。你有一些奇怪的负边距，所以我必须使用翻译中的 calc 函数来考虑这一点。

我还添加了pointer-events: none，这样即使您将鼠标悬停在.logo-div 上也可以触发象限动画。

#container 
  position: relative;


.logo-div 
  left: 50%;
  top: 50%;
  width: 30%;
  transform: translate(calc(-50% - 15px), -50%);
  position: absolute;
  z-index: 100;
  display: flex;
  pointer-events: none;

【讨论】：

它对我有用，但徽标不在中心导致 div 父维度，并且当我尝试对齐中心时它被阻止。我该如何解决？谢谢

我在父 img div 中使用 mx-auto 引导类解决了。

我必须注册才能分叉你的小提琴，否则我会链接到我的解决方案。 #container div 应该有position:relative 来限制任何绝对元素，即.logo-div，以离开容器。我相应地更新了我的答案。