jquery - 在自由横向空间中响应地居中元素

Question

我想在我的网页主要内容的右侧和左侧的可用横向空间的水平中间保持一个固定的横向广告框，响应式，无论屏幕尺寸如何。这应该适用于大屏幕，因为在小屏幕上没有问题。

你可以明白我的意思，如果你有一个大屏幕，我的网站左侧和右侧的亚马逊广告框不是水平居中的（在主要内容之外的可用空间中）。

解决方案可能是 flexbox 和属性“justify-content: space-around;”，它应该完全符合我的要求。

但我今天注意到flexbox与“位置：固定”不兼容：不兼容，至少与我的目的不兼容。根据 StackOverflow 和 Reddit 关于“弹性和固定”的线程，我做了很多尝试，将 a) 组合在父容器（主体）中

display:flex; justify-content: space-around; 

b) 在盒子里

position:fixed;

但如果我这样做，该框会出现在窗口的中心（在主要内容之上）......我错了吗？

你知道是否有另一种方式，不同于 flex+position:fixed （可能是 javascript/jquery？），这样固定框在自由横向空间中保持中间水平位置和“固定”位置？

谢谢！

标签： jqueryflexboxcss-positioncenterfixed

Answer 1

问题出在规则的位置webkit-filter: grayscale(100%);和标签filter: grayscale(100%);中。body从 中删除它的规则body，并将这些规则添加到html标签中，如下所示：

html {
  webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

为了更好地块居中，您需要top: 45%;在#publatdx和top: 45%;中设置规则#publatsx，如下所示：

 #publatdx {
        position: fixed;
        top: 45%; /*add this it*/
        right: 1%;
        max-width: 120px;
        margin-left: 2px;
        text-align: left;
        border-radius: 3px;
        box-shadow: 0 0 7px white;
    }

    #publatsx {
        position: fixed;
        top: 45%; /*add this it*/
        left: 1%;
        width: 120px;
        margin-left: 2px;
        text-align: left;
        border-radius: 3px;
        box-shadow: 0 0 7px white;
    }