SCramphorn
SCramphorn

Reputation: 467

CSS positioning not centering in IE but is in Chrome

Hi my friend is having trouble centering the text in the middle of the margins.

When I look at this site in IE 11 it just doesn't seem to center, could some one help me as to why?

<header id="site-header" class="site-header valign-center"> 
    <div class="intro">
        <h2>x</h2>
        <p> y </p>
        <h1>z</h1>
        <a class="btn btn-white" data-scroll href="#foo">button</a>
    </div>
</header>

The CSS:

.site-header {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    text-align: center;
    background: url(../images/backgrounds/header.jpg) no-repeat center center/cover;
}

.valign-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.site-header .intro {
    color: #fff;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1;
    padding: 0 15px;
}

I've tried margin: 0 auto; but it doesn't change.

Many Thanks,

Upvotes: 1

Views: 97

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

Add html, body { height: 100%; }

html,body {
  height: 100%;
}
.site-header {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    text-align: center;
    background: url(../images/backgrounds/header.jpg) no-repeat center center/cover;
}

.valign-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.site-header .intro {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1;
    padding: 0 15px;
}
<header id="site-header" class="site-header valign-center"> 
    <div class="intro">
        <h2>x</h2>
        <p> y </p>
        <h1>z</h1>
        <a class="btn btn-white" data-scroll href="#foo">button</a>
    </div>
</header>

Or you can just use height: 100vh on .site-header

.site-header {
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
    background: url(../images/backgrounds/header.jpg) no-repeat center center/cover;
}

.valign-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.site-header .intro {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1;
    padding: 0 15px;
}
<header id="site-header" class="site-header valign-center"> 
    <div class="intro">
        <h2>x</h2>
        <p> y </p>
        <h1>z</h1>
        <a class="btn btn-white" data-scroll href="#foo">button</a>
    </div>
</header>

Upvotes: 2

Related Questions