Flexbox box to the InternetExplorer center (11)

Question

Flexbox box to the InternetExplorer center (11)

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I try to align a box in which I use FlexBox and I have it well aligned in all the browsers I have tried (Chrome - Firefox - Opera).

But in internet explorer 11 (edge without problems) I align the box to the right, as if I did not recognize the size or margin.

I have the following HTML code

    .intro-foto{
      width:100%;
      height:auto;
      min-height: 500px;
      margin:0 auto 90px auto;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      /*background-attachment: fixed;*/
      background-attachment: scroll;
      display:flex;
        display:-webkit-flex;
        display:-moz-flex;
        display:-ms-flexbox;
        display:-o-flex;
      justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
      align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
    }
    .intro-texto{
      width:100%;
      flex:0 1 100%;
        -webkit-flex:0 1 100%;
        -moz-flex:0 1 100%;
        -ms-flex:0 1 100%;
        -o-flex:0 1 100%;
      margin:0 auto;
      max-width: 600px;
    }

<section class="intro-foto">
  <article class="intro-texto">
    <h2 class="titulo-intro">Bienvenidos a nuestra web</h2>
    <div class="separator-intro"></div>
    <div class="texto-intro"><p>Lore ipsum et dolor...</p>
    </div>
  </article>
</section>

I have made several attempts and removing the max-width moves it to the center but with that property nothing, I move it to the right without having any type of block or anything before.

css3 flexbox internet-explorer

asked by Marcos 11.09.2017 в 11:38

source

2 answers

Adapt text to the width of an image with PHP Does not authenticate on firebase

score 0 · Answer 1

In browsers that do not support flexbox you can do this:

1 - put the father in position:relative

2 - put the child in position:absolute

3 - use in the child

 top:50%;
 transform:translate(0%,-50%);

.intro-foto{
      width:100%;
      height:auto;
      min-height: 500px;
      margin:0 auto 90px auto;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      /*background-attachment: fixed;*/
      background-attachment: scroll;
      position:relative;
    }
    .intro-texto{
      width:100%;
      margin:0 auto;
      max-width: 600px;
      top:50%;
      position:absolute;
      transform:translate(0%,-50%);
    }

<section class="intro-foto">
  <article class="intro-texto">
    <h2 class="titulo-intro">Bienvenidos a nuestra web</h2>
    <div class="separator-intro"></div>
    <div class="texto-intro"><p>Lore ipsum et dolor...</p>
    </div>
  </article>
</section>

score 0 · Answer 2

I do not see much sense but removing the value justify-content: center seems to go well in all browsers.

.intro-foto{
  width:100%;
  height:auto;
  min-height: 500px;
  margin:0 auto 90px auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /*background-attachment: fixed;*/
  background-attachment: scroll;
  display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    display:-o-flex;
  //justify-content: center;
    //-webkit-justify-content: center;
    //-moz-justify-content: center;
    //-ms-justify-content: center;
    //-o-justify-content: center;
  align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
}
.intro-texto{
  border: solid 1px black;
  width:100%;
  flex:0 1 100%;
    -webkit-flex:0 1 100%;
    -moz-flex:0 1 100%;
    -ms-flex:0 1 100%;
    -o-flex:0 1 100%;
  margin:0 auto;
  max-width: 600px;
}

<section class="intro-foto">
        <article class="intro-texto">
          <h2 class="titulo-intro">Bienvenidos a nuestra web</h2>
          <div class="separator-intro"></div>
          <div class="texto-intro"><p>Lore ipsum et dolor...</p>
</div>
        </article>
      </section>