CSS图像位置的相对的Safari

忽略我有图像的图库，结构是这样的（简化）：CSS图像位置的相对的Safari

<div class="gallery"> 
    <figure class="gallery-item"> 
    <a class="gallery-item-link"> 
     <img /> 
    </a> 
    </figure> 
<figure class="gallery-item"> 
    <a class="gallery-item-link"> 
     <img /> 
    </a> 
    </figure> 
</div>

.gallery是一个柔性容器，其应适合于更大的屏幕3项。

我的问题是在.gallery-item-link内的图像集中定位。

相关片的CSS的是

.gallery-item-link img { 
    display: block; 
    max-width: 100%; 
    position: relative; 
    left: 50%; 
    transform: translateY(-50%); 
}

的尺寸和图像的比例可以改变，所以我不能依靠padding特技宽高比。

在Chrome中，这是画廊的样子：

在Safari中，这就是问题所在：

这里是为了说明问题笔：http://codepen.io/afkatja/pen/EWEMNb

上午我忘记/缺少的东西？

编辑：这个问题似乎与align-items: stretch有关，可能无法在Safari中正常工作（或只是忽略？）？

编辑：我使用Safari 10.0.3

来源

2017-03-22 afkatja

我想（在各种其他的东西）图像产生不可预知的结果，看起来很冒险。

display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;

我在这里更新了笔：

我最终用flexbox图像容器解决了这个问题http://codepen.io/afkatja/pen/EWEMNb

在最新测试过的浏览器，Safari浏览器（包括台式机和iOS），火狐，MS边缘& IE11。

来源

2017-03-30 10:10:12 afkatja

尝试

.gallery-item-link img { 
    position: relative; 
    display: block; 
    max-width: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50% -50%); 
}

来源

2017-03-22 11:27:51 thisiskelvin

我更新了笔。这个建议似乎没有改变任何东西。 – afkatja

您使用的是哪个版本的safari？ – thisiskelvin

它可能与transform-origin：左下方相关; css规则。注释掉或更改为transform-origin：左上角; – thisiskelvin

您已经为X &Ÿ错误的方向。应该平移X代替Y.试试这个：

名为.gallery项目链接IMG {

display: block; 
    max-width: 100%; 
    position: relative; 
    top : 50%; 
    left: 50%; 
    transform: translate(-50% -50%);

}

来源

2017-03-22 11:43:10

x和y的哪个方向我错了？检查我的笔，我有'translateX（-50％）translateY（-50％）'。 – afkatja

我以前有这个问题。当父元素没有像'px'这样的指定高度时，'相对'图像可能无法得到50％的高度。

这里是另一种方法做你想要的... SRY我不能使用固定为display: table-cell; vertical-align: middle;您的“相对”问题

&__item__link { 
    display: block; 
    height: 100%; 
    white-space:nowrap; 
    text-align:center; 
    text-decoration: none; 
    &::after{ 
    content:''; 
    display:inline-block; 
    vertical-align:middle; 
    height:100%; 
    } 
    img { 
    display:inline-block; 
    vertical-align:middle; 
    max-height: 100%; 
    // position: relative; 
    // @include center-all; 
    transform-origin: bottom left; 
    @include transition; 
    &:hover { 
     opacity: .8; 
    } 
    }

http://codepen.io/linjiyeah/pen/XMEwpb

来源

2017-03-22 12:21:27 LinJI

CSS图像位置的相对的Safari

回答

相关问题