0

Estoy intentando centrar un div que contiene una imagen con la propiedad de css background-imagen:url(url); pero no consigo centrar el div, este solamente se centraría si le doy como propiedad que tenga un width:100%; pero no quiero eso ya que expande la imagen a todo el ancho del div.

Adjunto mi código y la propidad css.

<div class="row mt-2 mb-4">
    <div class="col-12 text-center">
        
        @if($empleado->avatar != 'avatar_default.png')
            <div class="frame rounded-circle mt-2" style="background-image: url('{{ asset('/empleados/avatars/'.$empleado->id.'/'.$empleado->avatar) }}');">
        
            </div>
            {{-- <img src="{{ asset('empleados/avatars/'.$empleado->id.'/'.$empleado->avatar) }}" alt="" class="img-fluid rounded-circle mt-2" style="width:120px !important;height:120px !important;"> --}}
        @else
            <div class="frame rounded-circle mt-2" style="background-image: url('{{ asset('/empleados/'.$empleado->avatar) }}');">
        
            </div>
            {{-- <img src="{{ asset('empleados/'.$empleado->avatar) }}" alt="" class="img-fluid rounded-circle mt-2" style="width:120px !important;height:120px !important;"> --}}
        @endif
        
    </div>
</div>

Los signos {{-- --}} son comentarios en laravel. Estoy usando bootstrap como herramienta para dar estilo al sitio web.

La clase .frame tiene estas propiedades:

.frame{width: 100px;height:100px;background: transparent no-repeat center;background-size: cover;text-align:center !important;float:right;}

Aquí una captura de como se está visualizando:

introducir la descripción de la imagen aquí

6
  • Centrar de forma horizontal o vertical?
    – user128299
    Commented el 13 nov. 2020 a las 12:44
  • de forma horizontal @BetaM
    – Cristian
    Commented el 13 nov. 2020 a las 12:51
  • Prueba con la clase mx-auto que se indica en la propia doc. de bootstrap
    – user128299
    Commented el 13 nov. 2020 a las 12:54
  • Lo he probado pero tampoco ha sido un éxito @BetaM
    – Cristian
    Commented el 13 nov. 2020 a las 12:57
  • Probaste colocando .frame {margin: auto} y eliminando el float: right;?
    – Elboy
    Commented el 13 nov. 2020 a las 15:33

2 respuestas 2

0

Yo usaría Flexbox. Para ello, al contenedor de ambos elementos (texto e imagen) agrega los siguientes estilos CSS:

.contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Con esto se colocarían en columna y centrados horizontalmente.

1
  • Muchísimas gracias @Gabri me ha resuelto el problema! Gracias a todos por contribuir.
    – Cristian
    Commented el 16 nov. 2020 a las 12:18
0

Creo que usar Flexbox es la mejor forma, la respuesta de Gabri lo deja bastante claro, sin embargo puedo dejarte otra opción aunque no es la más recomendable.

.frame {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
}

Corrijo, esto centrará la imagen de forma horizontal, después tendrás que asignar un alto

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.