Safari 中的文本定位

Question

我在 Safari 中遇到了一个奇怪的问题，即我一直在处理的网站上的按钮文本定位问题。

1.使用 left: ...; 时是否可以使文本在按钮上居中对齐？这会解决问题吗？

2。将 span 放置在相对放置的 div .text-pos 与子 class .text-pos span ... position: absolute; 格式不对？它能解决问题吗？

代码：

.button a span {
 z-index: 2;
 width: 100%;
 position: absolute;
 top: 12%;
 color: #000000;
 text-align: center;
 font-size: 4vmin;

}

.button a img {
 
 height: 100%;
 display: flex;
 
}

<div class="button antiques">
 <a href="/landing/gallery/antiques/antiques.html">
  <img alt="antiques" src="/assets/img_style/plank.png">
  <span>ANTIQUES</span>
 </a>
</div>

未包含 left: ...;，因为文本需要在按钮上居中对齐。

结果（对 post 图像来说太新了）： http://i.imgur.com/3E55EMH.png

我的第一个想法是 vmin 有问题，但是：

1- Text scales appropriately with browser adjustments.

2- Text on the hover(upper left image frame) also uses vmin, but is appropriately positioned.

关于第二点，文本被放置在相对定位的 div 容器中以强制纵横比，如下所示：

<div id="wide-container"> /* position: relative; */
    <div id="content"> /* position: absolute; */
        ...
    </div>
</div>

我没有准备好访问 OSX 机器，所以任何输入将不胜感激！

对您可能必须提供的任何其他方法持开放态度。谢谢 (:

已解决

.button {
 
 height: 6vmin;
 margin-top:1.5vmin;
 margin-bottom:1.5vmin;
 position: relative;
  
  }

.button a {
 
 height: 100%;
 
}

.button:before a {
 
 content: "";
 display: block;
 
}

.button a span {
 z-index: 2;
 position: absolute;
 top: 9%;
 bottom: 0;
 left: 0;
 right: 0;
    text-align:center;
    width: 100%;
 height: 100%;
 
 color: #000000;
 font-size: 4vmin;

}

Answer 1

通过将按钮设置为相对定位而将文本位置保留为绝对位置找到了解决方案。编辑后的问题中更详细地概述了解决方案。

问题出在我对浏览器如何以不同方式对待盒子模型的误解。 Safari 似乎正在获取包含的元素并将它们单独浮动，因为图像没有定位属性。

此解决方案在 Chrome、Firefox 和 Safari 上的显示大致相同。

Safari 中的文本定位

Text Positioning in Safari

html

css

safari

macos

css-position