CSS- MediaWiki - 对齐图库覆盖框以 MonoBook Skin 为中心

Question

我目前将 MonoBook 皮肤重写为深色模式，但偶然发现了画廊覆盖 css 的问题。

叠加显示一个（默认）半透明白框，底部有文本，覆盖图像。 很好..改变了盒子的颜色、大小和文本。

当前代码是这样的：

ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
    position: absolute;
    background: #fff;
    background: rgba( 128, 128, 128, 0.6 );
    padding: 3px 3px 3px 3px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    max-height: 20%;
    max-width: 100%;
    overflow: hidden;
    font-weight: bold;
    margin: 2px;

    p {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        color: #fff;
        font-size: 14px;
        
    }

    &:hover {
        overflow: visible;
        height: auto;
        width: 100%;
        max-height: 20%;
        max-width: 100%;

        p {
            text-overflow: clip;
            white-space: normal;
            overflow: visible;
            text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
            font-size: 14px;
        }
    }
}

现在看起来像这样：

覆盖框未在图像框的整个宽度上居中对齐。它向左对齐，向右有一个间隙..

也尝试添加

align: center;

。没有帮助..

有人有这方面的经验并可以在这里给我提示吗？

覆盖框位于图像框的中心。

Answer 1

找到解决方案。

div.gallerytextwrapper {
    width: auto !important;
}

在OP中的代码起作用之前。