html - 视口(viewport)内的中心项,而不包含引导栏-LMLPHP

我正在尝试将某个项目居中放置在视口内,而不是包含的引导列。图片中显示的段落位于一个带有.col-md-4类的引导程序列中。当我将鼠标悬停在每张图片上时,我希望下面的段落在视口内居中。而是,该段落似乎在引导程序列中保持左对齐。以下是本段的当前CSS,并且在上面包括了一个链接,以更好地说明问题。

.TestimonyParagraph{
    font-size: 20px;
    margin-top: 15px;
    position: relative;
    width: 50vw;
    left: 0;
    right: 0;
    padding: 15px;
    color: #ffffff;
    background-color: #898989;
    display: none;
}

.home-features__box:hover + .TestimonyParagraph{
    display: block;
}

最佳答案

您可以使用

margin: 0 auto;


以传统方式
您可以使用弹性盒,否则:

display: flex;
justify-content: center;


提供代码结构以获得更好的答案

09-10 09:09
查看更多