中心项目内视，而不是包含自举列

我想视口，而不是包含引导列中居中的一个项目。图片中显示的段落在分配给它的.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; 
}

来源

2017-03-15 Ricky Kreiser

你已经设置了'width：50vw'什么会显示当前视口的一半内容。你有没有试过改变这个值？ – alljamin

提交所有相关的代码 – ZimSystem

你尝试加入

margin:0 auto;

到TestimonyParagraph？同时在这里检查： Center a column using Twitter Bootstrap 3

如果不是，请张贴您的结构Jsfiddle或Codepen，以便我们可以更好地协助。

来源

2017-03-15 20:31:18 mrsq

是的，我确实尝试过。我在这里添加了一个代码片段在stackoverflow，但它并没有正确拉动bootstrap –

您可以在传统的方式使用

margin: 0 auto;

。您可以通过用户的柔性盒，否则： -

display: flex; 
justify-content: center;

更好的答案

来源

2017-03-16 05:13:05 Abinthaha

我试了两个，它仍然试图在引导列内对齐。 –

我无法获取代码段功能来识别bootstrap CDN，或者我会以这种方式发布它。 –

提供代码的结构，因为你已经设置width: 50vw;此元素，你可以简单地使用left: 25vw;（25左+ 50的div + 25右边是100vw - 全宽，因此是一种居中的方式）。但是，如果父元素没有跨越整个宽度（这在你的图片中似乎是这种情况），最好用百分比：left: 25%和width: 50%来做同样的事情。

来源

2017-03-16 22:25:21 Johannes

我也尝试过。问题是，当我使用宽度：50％时，它是父元素的50％（这是上面那些图片之一的宽度）。我需要证词段留在它的父div，但找到一种方法来忽略它的父母的宽度。 –

中心项目内视，而不是包含自举列

回答

相关问题