CODEWITHSUNDEEP
htmlcsssafariflexbox
biscuit_
biscuit_

Reputation: 197

Flexbox center not working in safari

I'm having a little trouble centering DIVs using flexbox, only in safari. I thought it may be lacking a -webkit- but it seems safari needs -webkit- only?

Here is the code so far, both classes are a child of .alltext so they can be called within the same 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;
}

Thanks

Upvotes: 2

Views: 6329

Answers (1)

Okku
Okku

Reputation: 7829

Perhaps this is what you were looking for?

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>

Upvotes: 2

Related Questions