MonoBook皮肤中Gallery覆盖层盒子居中对齐的CSS问题求助

问题描述 #

我正在将MonoBook皮肤重写为深色模式版本，遇到了图库（Gallery）覆盖层的CSS问题——默认覆盖层是图片底部的半透明白色文本框，修改颜色、尺寸和文本样式后，覆盖层盒子未在图片盒子内居中对齐，而是左对齐且右侧存在空隙，尝试添加align: center;无效，寻求解决办法。

当前使用的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;
        }
    }
}

解决方案 #

问题根源 #

1. 同时设置left: 0; right: 0; width: 100%;已让元素撑满父容器，但额外添加的margin: 2px会让元素宽度超出父容器，导致右侧出现空隙，视觉上呈现左对齐效果。
2. align: center仅适用于内联元素或表格布局，对绝对定位的块级元素无效。

修复步骤 #

• 移除width: 100%;（left: 0; right: 0已能让元素自适应父容器宽度）
• 将margin: 2px替换为left: 2px; right: 2px; bottom: 2px;，移除原bottom: 0，让覆盖层在父容器内保留2px边距，自然填满可用空间
• 添加box-sizing: border-box;确保padding不会额外增加元素宽度，避免超出父容器

修改后的完整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;
    bottom: 2px;
    left: 2px;
    right: 2px;
    height: auto;
    max-height: 20%;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;

    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;
        max-height: 20%;

        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;
        }
    }
}

内容的提问来源于stack exchange，提问作者Patrick Wenzel