javascript - 我无法将我 fork 的 Chrome 扩展中的元素居中

Question

我需要有关我 fork 的 Chrome 扩展程序的帮助，

这是一个有助于管理选项卡的扩展，我希望选项卡的图形表示在浏览器窗口中居中。

我已经尝试了许多 CSS 属性，但没有任何改变，我不明白为什么？ 🤔

像这样的事情通常有效，但在这方面没有任何改变。

margin-left: auto;
margin-right: auto;  

为了更好的理解，这里有一个截图:

这是扩展的链接，如果它可以帮助你帮助我的话: https://dl.dropboxusercontent.com/s/ok7zj2fwqp9bdgu/TabsPaneMikhoulFork.7z

问候! 😊

Answer 1

这里的问题是您强制 tabsPane 元素为 width:100% !important 而原始扩展设置了一个自动重新计算的像素宽度调整大小。

您可以改为为 tabsPane 设置以下属性:

// The 100px will automatically be divided as the left and right margins.
width:-webkit-calc(100% - 100px);
width:calc(100% - 100px);

calc 是一个属性 supported自 Chrome 19 以来在 Chrome 中，因此应该没有问题。如果您要将此插件的设计复制到另一个旧版浏览器并且不支持 calc，则有多种方法可以使宽度未知的 div 居中。

CSS-Tricks 有一篇关于此的优秀文章:https://css-tricks.com/centering-css-complete-guide/#center-horizontally