Safari

Question

我有一个图片库，结构如下（简化）：

<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

Answer 1

尝试

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

Answer 2

  

你有x＆amp;的方向我错了。它应该是translateX而不是Y.试试这个：

.gallery-item-link img {

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

}

Answer 3

之前我遇到过这个问题。当父元素没有像'px'那样的指定高度时，可能因为“相对”图像不能达到50％的高度。

这是另一种做你想要的方式... sry我无法解决你的“相对”问题

&__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

Answer 4

我尝试（在其他各种事情中）使用display: table-cell; vertical-align: middle;用于产生不可预测结果并且看起来如此hacky的图像。

我最终使用flexbox用于图像容器来解决问题：

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

我在这里更新了笔：http://codepen.io/afkatja/pen/EWEMNb

在最新的Chrome，Safari（桌面和iOS），Firefox，MS Edge和IE11。