0

estoy usando una plantilla AdminLte, que uso como layout. En la parte donde voy a meter el contenido está así:

            <div class="content-wrapper">
                <section class="content">
                        @yield('content')
                </section>
                <!-- /.content -->
            </div>

En la vista donde tengo el contenido a desplegar tengo:

@extends('layouts.app')

@section('content')
    <div>
        <img class="mx-auto my-auto d-block" src="{{ asset('dist/img/logo.png')}}" alt="logo" style="opacity: .2">
    </div>
@endsection

Al ejecutar, me aparece la imagen del logo centrado horizontalmente, pero verticalmente me aparece pegado al margen superior. He intentado varias formas, pero no logro que centre verticalmente. No logro entender cómo solucionarlo. Agradeceré una ayuda.

introducir la descripción de la imagen aquí

2
  • ¿Usas bootstrap?
    – user128299
    Commented el 23 nov. 2020 a las 1:49
  • Sí, la plantilla AdminLte utiliza bootstrap Commented el 23 nov. 2020 a las 1:55

1 respuesta 1

0

Considero que siguiendo la doc. de bootstrap puedes:

  • Darle un display flex al contenedor, en este caso el div
  • Mover al centro verticalmente con align-items dándole un valor de center
  • Mover al centro horizontalmente con justify-content dándole un valor de center

Ejemplo:

<div class="container d-flex justify-content-center align-items-center">
  <img src="ruta_archivo" alt="" />
</div>

Edición

<link rel="stylesheet" href="ruta_del_css">
<style>
  img {
    border: 1px solid red;
    width: 100px; /*esta medida es solo para construir el ejemplo*/
  }
  .container {
    border: 1px solid;
    height: 200px; /*le estoy colocando un alto definido*/
  }
</style>
<div class="container d-flex justify-content-center align-items-center">
  <img src="ruta_archivo" alt="">
</div>

Generando un resultado como este:

introducir la descripción de la imagen aquí

  • Y te recomiendo le eches un vistazo a las características del la propiedad height y como se comporta
5
  • Gracias, pero sigue centrando horizontalmente, pero no verticalmente. Laí la documentación y probé otras variantes, pero no logra justificar verticalmente. Buscando información, di con algo en donde mencionan que en una situación similar, sí estaría centrando verticalmente, pero como el DIV padre se autoajusta al hijo, el hijo al tratar de centrarse, se centra en función de su padre que está ajustado a él hijo. En este caso hablaban de hacer el body al 100%. Estoy tratando de encontrar la info nuevamente. Commented el 23 nov. 2020 a las 2:15
  • Entonces dale una altura definida al contenedor de la imagen para que los bordes superior e inferior de la imagen no rocen con este y se noten los 2 centrados @JuncoFuerte, de todos modos añado un ejemplo
    – user128299
    Commented el 23 nov. 2020 a las 2:16
  • @JuncoFuerte listo te agregué un ejemplo
    – user128299
    Commented el 23 nov. 2020 a las 2:28
  • Te agradezco tu ayuda y tiempo. Voy a seguir revisando lo de la propiedad height, pues ya estoy convencido de que el problema no es de las instrucciones de centrado vertical, sino que el problema guarda relación con el contenedor de todo esto, que al estar pegado, no centra nada. Muchas gracias y si encuentro la solución, la comparto por acá. Commented el 23 nov. 2020 a las 3:17
  • Aquí está la solución que aportó @Heru Purwito stackoverflow.com/a/64962389/7154011 Commented el 23 nov. 2020 a las 13:27

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.