Question

我在Firefox中使用flexbox水平对齐div时遇到问题。它在Chrome中运行良好。

这是代码：

<header id="header">
    <p class="small-hidden">I am</p>
    <h1>Håkan</h1>
    <p>web designer from Sweden, living in the Basque Country, Spain</p>
    <div class="contact-icons">
        <a href="#.com"><i class="mi mi-Mail"></i></a>
        <a href="#"><i class="mi mi-whatsapp"></i></a>
        <a href="#contact"><i class="mi mi-PenPalette"></i></a>
    </div>
</header>    
 --------------------------------------------------------------------------

header {
  background-image: url(../img/hakan_mobile.jpg);
  background-size: cover;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content:  flex-end;
  align-items: center;
  color: #777;
  }
@media only screen and (min-width: 40em) {
  header {
    background-image: url(../img/hakan.jpg);
    height: 100vh;
    width: 40vw;
    position: fixed;
    background-position: center;
    justify-content: center;
    }
  }
.contact-icons {
  position: fixed;
  top: 0;
  }
@media only screen and (min-width: 40em) {
  .contact-icons {
    bottom: 2rem;
    top: inherit;
    }
  }

我想要做的是将文本（p + h1 + p）放在标题的下半部分，链接应居中并固定在屏幕顶部的小屏幕上并居中于底部更大的屏幕。但是，如果我使用position: fixed（在移动设备上向下滚动时需要保持链接在屏幕顶部可见），.contact-icons将不会水平居中。如果我删除了position: fixed，它就有效。

我在容器上尝试了align-items: center，在align-self: center上尝试了.contact-icons，但结果相同。

在Chrome中，功能完美，但我无法在Firefox中运行。有什么建议吗？

小提琴：https://jsfiddle.net/1qrqxd7m/

在小提琴上看起来几乎居中，但仍然没有。在我的工作副本上，它看起来更偏离中心。

Answer 1

也许特别针对Firefox使用＆＃34; position：sticky;＆＃34;

Answer 2

由于您正在使用position: fixed，因此预计不会对Flex容器的样式影响.contact-icons定位。

将它们相对于整个页面水平居中：

position: fixed
left: 50%
transform: translateX(-50%)

Flexbox：Align-self：center不适用于位置：在firefox中修复

2 个答案: