1

Estoy centrando una imagen en un div, funciona bien en chrome, pero en Internet Explorer no se centra bien, ¿pueden guiarme?

Éste es mi código:

.imgUser {
  display: flex;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  margin-top: 15px;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
}

.imgUser img {
  height: 100%;
}
<div style="width: 250px; text-align: center; float: left; background-color: gray; ">

  <div class="imgUser">
    <img src="img.jpg">
  </div>

</div>

3
  • 1
    Internet Explorer no termina de soportar bien FlexBox. Eso puede ser el motivo por el que se ve bien en Chrome pero no en Explorer. Dependiendo de lo que quieras hacer, quizás podrías plantearte no usar flex, y centrar directamente con text-align:center (aunque no sé cuál es tu caso específico).
    – Alvaro Montoro
    Commented el 16 abr. 2019 a las 15:45
  • 1
    @AlvaroMontoro pero en IE el problema es el valor space-evenly de justify-content, que no se enfoca en centrar los elementos sino en distribuirlos equitativamente; claro, hay otros bugs y mas pero el Flexbox en general esta muy bien soportado
    – IvanS95
    Commented el 16 abr. 2019 a las 16:03
  • 1
    @IvanS95 Tienes razón, tenía que haber puesto un enlace más específico. La tercera opción de mi enlace (la de Flexible Box) indica que para versiones antiguas de IE hace falta el prefijo -ms- y que IE en general cuenta con numerosos bugs para flexbox.
    – Alvaro Montoro
    Commented el 16 abr. 2019 a las 16:13

3 respuestas 3

0

Según tengo entendido, display flex no funciona en internet explore, creo que solo en edge. Recuerda que en caso de que tu div no tenga una altura definida ni un ancho definido simplemente se usa margin 0 auto pero como tu div tiene ambas dimensiones definidas se hace de la siguiente manera:

.padre{
position: relative; /* Se usa para que no se salga la imagen de la caja, ya que la imagen tiene position absolute */
width: 500px;
height: 200px;
background-color: #ddd;
}
.padre img{
position: absolute; /* se usa en caso de este div, donde tiene la altura y el ancho definido, sin esto top, right y left no funcionarían */
width: 100px;
top: 25%; /* sirve en caso de un div como este, donde tiene una altura definida, en caso de que la altura no este definida esta edición no se pone ; */
right: 0; /* se debe usar para que margin 0 auto funcione */
left: 0; /* se debe usar para que margin 0 auto funcione */
margin: 0 auto; /* Esto lo centra */
}
<div class="padre">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png">
</div>

0

yo las centro usando el siguiente código

<head>
</head>
<body>
<style type="text/css">
    .padre{
        position:relative;
        width:100%;
    }   

    .imagen{
        margin:auto;
        display:block;
    }
</style>

<div class="padre">
<img class="imagen" src="https://c.files.bbci.co.uk/AB9D/production/_106433934_ffffff-650-80.jpg" />
</div>
</body>

Espero tu calificación.

1
  • Deberías añadir una breve descripción de lo que hace ese código y, a ser posible, adaptarlo al código compartido en la pregunta.
    – Alvaro Montoro
    Commented el 16 abr. 2019 a las 16:14
0

Es sencillo usando margenes automáticos:

.imgUser{
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  height: 120px;  
}
.imgUser img {
  height: 100%;
}
<div style="width: 350px; text-align: center; float: left; background-color: gray; ">

  <div class="imgUser">
    <img src="img.jpg">
  </div>

</div>

2
  • No consideras que para optimización de código es mejor margin: 0 auto; que igual hace referencia, a margin-left y margin-right Commented el 16 abr. 2019 a las 20:48
  • Supongo que si, pero ni me planteo optimizaciones de esta índole en css, quizá así veo más claramente a que se refiere el valor... será la costumbre.
    – Fly
    Commented el 16 abr. 2019 a las 21:52

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.