Austin Austin - 5 months ago 21
HTML Question

Center Center align in Internet Explorer is offset

I am new to Angular Material Design (https://material.angularjs.org/latest/) and having some trouble getting a loading bar

div
to be centered horizontally and vertically within Internet Explorer (works fine in Chrome/FF).

I have already perused through the known flexbox issues and cannot seem to pinpoint this one's fix.

JSFiddle: https://jsfiddle.net/aanders50/suunyz3e/223/

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

<md-content class="loader" layout="row" layout-align="center center" flex>
<div id="title" flex>
<span>Loading...</span>
</div>
<div class="progress" flex>
<div flex class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</md-content>

</main>


CSS

#view {
height: 100%;
width: 100%;
}

.progress {
max-width: 260px;
}

#title {
position: absolute;
top: 50%;
left: 0;
right: 0;
color: black;
text-align: center;
font-family: "lato", sans-serif;
font-weight: 300;
font-size: 40px;
letter-spacing: 10px;
margin-top: -72px;
padding-left: 10px;
}


Image
enter image description here

My goal is to do most, if not all, of my layout using just material design elements - if you notice that I am using it wrong please feel free to point it out! Thanks!

Answer

IE has probles with centering the element if parent is layout="row".

EDIT_01: It has problems if there is only one element centered vertically or something like that, I had the same issues with that.

If you want both "title" and "progress" to be centered like in jsfiddle, you should use layout="column" for "loader" and no absolute positioning for "title":

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="column" layout-align="center center" flex>
    <div id="title">
      <span>Loading...</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  width: 100%;          -- to stretch it to 260px max
  max-width: 260px;
}

#title {
  color: black;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  padding-left: 10px;
}

EDIT_02: Also there were many redundant flex attributes.