Question

过去一小时一直试着让我的悬停效果试图正常工作。

我需要在图像悬停时垂直对齐图像。我尝试了几乎所有元素的垂直对齐，但我似乎无法正确定位它。

Answer 1

因此，您遇到了一个非常常见的CSS问题，所有开发人员都会遇到这个问题：垂直对齐。有几种不同的方法可以垂直对齐某些内容，每种方案的使用方式各不相同。有关完整指南和更多信息，请查看CSS-Tricks.com上的这篇精彩文章：
（https://css-tricks.com/centering-css-complete-guide/）

对于你的场景（我在你的网站上试过它并且它有效）我会把它改成：

 figcaption h3 {
     position:absolute;
     left:50%;
     right:50%;
     transform:translate(-50%,-50%);
 }

并带走

figcaption:hover h3 {
     left:0;
}

这有效

Answer 2

只需向nil添加几行代码：

collectionView

有关flexbox的更多信息，请访问：

Using CSS flexible boxes ~MDN
A Complete Guide to Flexbox ~CSS-Tricks

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

无法垂直对齐图像上的标题

2 个答案: