CODEWITHSUNDEEP
htmlcsssafaricentermargin
lambdacore
lambdacore

Reputation: 95

Vertical centering in Safari

I've got a problem with vertical centering in Safari, using margin: auto 0; on a div which is nested inside a div with display: inline-flex;

It works just fine in Firefox, Chrome, Opera... but fails in Safari (and on the default Android browser but I'm considering using a separate CSS for that and whatever iPads use)

Here's the code (I am using Bootstrap, btw): http://jsfiddle.net/n2V5q/1/

<div class="container-fluid head" id="slide1">
    <div class="col-md-6 logo">
        <img src="img/logo.png" alt="THE LOGO" />
    </div>
</div>

and

 .container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.head {
    color: #fff;
    width: 100%;
    min-height: 100rem; /* for Opera */
    min-height: 100vh;
    padding: 15px;
    background-color: rgba(85,61,148,.9);
    box-shadow: 0px 0px 6px #000000;
    z-index: 90;
    position: relative;
    background-image: url('../img/dither2.png');
    background-position: center bottom;
    background-repeat: repeat-x;
    display: -o-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: inline-flex;
}

.col-md-6 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.logo {
    margin: auto 0;
    text-align: center;
}

Upvotes: 8

Views: 11508

Answers (2)

PM Corewix
PM Corewix

Reputation: 1

try this css

 .head {
        display: flex;
        align-items: center;
        justify-content: center;
    }

Upvotes: 0

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2552

try it in you head class

 display: -webkit-inline-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

Upvotes: 14

Related Questions