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中工作

回答

相關問題