Question

我的网站上有图片，中间的标题显示在悬停状态。相同的HTML应用于每个相同的CSS。它在大多数浏览器中都可以正常工作，但Chrome除外，其中只有第一列图像正常工作且休息时间不足。

Firefox和Edge工作正常，即使IE也没问题

Answer 1

您需要将img-caption上的转换属性更改为translate3d(-50%, 100%, 0)。

编辑：

关于容器上的悬停问题，这是由于您的column-count属性造成的。更改.gal3类以使用flex属性可以解决问题。

.gal3 {
  display: flex;
  flex-flow: row wrap;
}

.gal3 .gal-container {
  width: 33%;
}

如果您想要将图片居中，也可以使用您已经使用过的align-middle课程。

Answer 2

You can try this code,

<div class="img-caption">
 <div>
  <b>W filament</b>
  <p>3.08.1.100.m.o</p>
 </div>
</div> 

<style>
.img-caption {
    position: absolute;
    color: white;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}
</style>

Answer 3

试试这个

.img-caption {

position: relative;
color: white;
font-size: 15px;
font-weight: 400;
vertical-align: middle;
text-align: center;
margin: 10px auto;
top: 2em;
left: 0;
transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%) -moz-transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
display: inline;

}

相同的CSS，不同的结果（Bootstrap4，仅限Chrome）

3 个答案: