html - Flexbox center not working in safari -
i'm having little trouble centering divs using flexbox, in safari. thought may lacking -webkit- seems safari needs -webkit- only?
here code far, both classes child of .alltext can called within 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
perhaps 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>
Comments
Post a Comment