Question

我在使用flexbox集中DIV时遇到了一些麻烦，只有在safari中才有。我认为它可能缺少-webkit-但似乎safari需要-webkit-只有？

到目前为止，这是代码，两个类都是.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;
}

由于

Answer 1

也许这就是你要找的东西？

＆＃13;

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;
 }

＆＃13;

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

＆＃13;

Flexbox中心不在safari中工作

1 个答案: