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:
mx-auto
que se indica en la propia doc. de bootstrap