我正在尝试将某个项目居中放置在视口内,而不是包含的引导列。图片中显示的段落位于一个带有.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;
提供代码结构以获得更好的答案