我无法将要分叉的Chrome扩展程序中的元素居中

Question

我需要我派生的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是自 Chrome 19 起在Chrome中supported的属性，因此那里应该没有问题。如果要将此插件的设计复制到另一个旧版浏览器，并且不支持calc，则有很多方法可以将宽度未知的div居中。

CSS-Tricks上有一篇很棒的文章：https://css-tricks.com/centering-css-complete-guide/#center-horizontally