javascript - 我无法将我正在分叉的 Chrome 扩展中的元素居中
问题描述
我需要关于我正在分叉的 Chrome 扩展程序的帮助，
这是一个有助于管理标签的扩展，我希望标签的图形表示在浏览器窗口中居中。
我尝试了许多 CSS 属性，但没有任何改变，我不明白为什么？
像这样的事情通常有效，但在这一切都没有改变。
margin-left: auto;
margin-right: auto;
这是一个屏幕截图，可以更好地理解：
这是扩展程序的链接，如果它可以帮助您帮助我的话： https ://dl.dropboxusercontent.com/s/ok7zj2fwqp9bdgu/TabsPaneMikhoulFork.7z
问候 ！
解决方案
这里的问题是您已经强制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支持的属性，因此应该没有问题。如果您将此插件的设计复制到另一个旧版浏览器并且不受支持，则有多种方法可以使宽度未知的 div 居中。calc
CSS-Tricks 对此有一篇出色的文章：https ://css-tricks.com/centering-css-complete-guide/#center-horizontally