Flexbox中心不能在safari中工作

我在使用flexbox集中DIV时只遇到了一点麻烦，只能在safari中使用。我认为它可能缺少-webkit，但它似乎只需要Safari浏览器？Flexbox中心不能在safari中工作

以下是目前为止的代码，这两个类都是.alltext的子代，因此可以在同一个JavaScript内调用它们。

<div class ="container"> 

<div class = "alltext textone"> 
<p>Text here</p> 
</div> 

<div class = "alltext texttwo"> 
<p>Text here</p> 
</div> 
</div>

CSS：

.alltext { 
color: black; 
display: hidden; 
} 

.centertext { 
    margin-right: none; 
    margin-left: none; 
    display: flex; 
    display:-webkit-flex; 
    display:-webkit-flexbox; 
    display:-ms-flexbox; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    vertical-align: center; 
    position: fixed; 
    top: 0; 
    margin: auto; 
    margin-top: 0; 
    } 

.textone { 
position: relative; 
max-width: 95%; 
text-align: center; 
font-size: 6em; 
} 

.texttwo { 
width: 85%; 
text-align: center; 
font-size: 6em; 
}

感谢

来源

2015-06-04 biscuit_

我不知道如果与你有你'display'的顺序呢？此外，您试图让它在 – Andrew

中工作的浏览器版本似乎不适用于任何浏览器，因此不仅仅是Safari问题。 –

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - 这里是最适合您的帮助 – Andrew

或许，这就是你要找的人？

div{ 
 
    box-shadow:inset 0px 0px 0px 1px red; 
 
} 
 

 
.container{ 
 
    display:-webkit-flex; 
 
    display:-ms-flex; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction:column; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    left:0; 
 
} 
 

 
.textone{ 
 
    position: relative; 
 
    max-width: 95%; 
 
    text-align: center; 
 
    font-size: 6em; 
 
} 
 

 
.texttwo { 
 
    width: 85%; 
 
    text-align: center; 
 
    font-size: 6em; 
 
}

<div class="container"> 
 
    <div class="alltext textone"> 
 
     <p>Text here</p> 
 
    </div> 
 
    <div class="alltext texttwo"> 
 
     <p>Text here</p> 
 
    </div> 
 
</div>

来源

2015-06-04 12:59:43

Flexbox中心不能在safari中工作

回答

相关问题