1

Tengo un contenedor div (id="columna3") y una imagen (id="user"). La misma quiero posicionarla a la derecha, eso está bien, lo hago con position:absolute y right: 0px. Pero la misma no está centrada verticalmente. He intentado ya que la imagen tiene position absolute height: 50%; bottom: 50%; pero la imagen sube a la parte superior del div.

Cualquier ayuda se lo agradecería. Saludos.

 #columna3{
    position: relative;
    display: flex;
    text-align: left;
    border: solid;
    border-color: red;
  }

  #user{
    position: absolute;
    right: 0px;
 
  }

He intentado:

  #user{
    position: absolute;
    right: 0px;
    height: 50%;
    bottom: 50%;
  }

Pero la imagen sube a la parte superior del contenedor.

2
  • Ayudaría mucho agregues tu HTML
    – user128299
    Commented el 6 nov. 2020 a las 23:26
  • Es solo un div con una imagen adentro.. No agregué el código porque es en React JS con el framework Ionic. Commented el 6 nov. 2020 a las 23:34

2 respuestas 2

2

Comentarios:

  • No ocupamos posicionamiento, en su lugar sácale mas provecho a flexbox
  • Usa como ya te dicen align-items para mover al centro de forma vertical tu imagen
  • Usa justify-content con valor de flex-end para que horizontalmente la imagen se desplaze a la derecha de su etiqueta contenedora
  • Elimina las siguientes reglas, ya no serán necesarias:
    • right: 0px;
    • height: 50%;
    • bottom: 50%;
  • Si por ejemplo deseas que la imagen no quede totalmente pegada al margen derecho de su contenedor, entonces le puedes aplicar un margin-right con un valor específico que ayude a moverla

Ejemplo 1:

    <style>
      .contenedor {
        background-color: teal;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 300px;
        width: 300px;
      }
      
      .contenedor-img {
        background-color: crimson;
        height: 120px;
        width: 120px;
      }
    </style>
    
    <div class="contenedor">
      <img src="" alt="" class="contenedor-img">
    </div>

Ejemplo 2:

    <style>
      .contenedor {
        background-color: teal;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 300px;
        width: 300px;
      }
      
      .contenedor-img {
        background-color: crimson;
        height: 120px;
        width: 120px;
        margin-right: 15px;
      }
    </style>
    
    <div class="contenedor">
      <img src="" alt="" class="contenedor-img">
    </div>

Salvo que un requerimiento de tu maquetación dicte un posicionamiento determinado, yo quitaría esa instrucción, cuando haces uso de flexbox tienes la posibilidad de indicar como de distribuirán las cajas internas del contenedor.

Lecturas de interés

2
  • gracias. Que el contenedor de la imagen tenga una altura de 120px es por algo? Commented el 7 nov. 2020 a las 13:37
  • @Julian solo fue para construir el ejemplo, pero tú dale las medidas que requieres
    – user128299
    Commented el 7 nov. 2020 a las 13:38
1

Para centrar la imagen podrías ponerle a columna3 el siguiente código

 #columna3{
    display: flex;
    align-items: center; //esto lo que hace es centrar todos lo elementos hijos verticalmente
    text-align: left;
    position: relative;
    border: solid;
    border-color: red;
  }

  #user{
    position: absolute;
    right: 0px;
 
  }

te puedes guiar con esta imagen y revisar documentación acerca de Flexbox. introducir la descripción de la imagen aquí

2
  • Aquí right: 0px; no hace falta el px
    – user128299
    Commented el 6 nov. 2020 a las 23:36
  • Gracias. He implementado el código pero la imagen queda en la parte inferior del container div. Commented el 6 nov. 2020 a las 23:39

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.