0

Intento alinear una caja en la que uso FlexBox y la tengo bien alineada en todos los navegadores en los que he probado (Chrome - Firefox - Opera).

Pero en internet explorer 11 (edge sin problemas) me alinea la caja a la derecha, como si no reconociese el tamaño o el margen.

Tengo el siguiente código HTML

    .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>

He hecho varios intentos y quitando el max-width me lo mueve al centro pero con esa propiedad nada, me lo mueve a la derecha sin tener antes ningún tipo de bloque ni nada.

2 respuestas 2

0

No le veo mucho sentido pero quitando el valor justify-content: center parece ir bien en todos los navegadores.

.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>

2
  • Es que es curioso...si quito el max-width y le pongo width:600px funciona, ahora como le ponga el max-width me falla. Igual que el alinear verticalmente...
    – Marcos
    el 11 sep. 2017 a las 10:53
  • @Marcos con el código que habeis puesto los dos en chrome aparece alineado verticalmente en el centro pero a la izquierda y en ie me aparece arriba y a la izquierda.
    – GDP
    el 11 sep. 2017 a las 11:25
0

En navegadores que no soporten flexbox puedes hacer esto:

1 - poner el padre en position:relative

2 - poner el hijo en position:absolute

3 - usar en el hijo

 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.